|
|
|
@ -9,20 +9,20 @@ |
|
|
|
<el-button type="primary" @click="() => $refs.jpg.click()">选择图片</el-button> |
|
|
|
<el-button type="primary" @click="() => $refs.jpg.click()">选择图片</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-show="jpg.input.src" class="image-container"> |
|
|
|
<div v-show="jpg.input.src" class="image-container"> |
|
|
|
<p>原始图片：{{jpg.name}} ({{jpg.input.size|numberFormatter}})</p> |
|
|
|
<p>原始图片：{{ jpg.name }} ({{ jpg.input.size|numberFormatter }})</p> |
|
|
|
<img :src="jpg.input.src"> |
|
|
|
<img :src="jpg.input.src"> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-show="jpg.output.src" class="image-container"> |
|
|
|
<div v-show="jpg.output.src" class="image-container"> |
|
|
|
<p> |
|
|
|
<p> |
|
|
|
压缩后大小：({{jpg.output.size|numberFormatter}})， |
|
|
|
压缩后大小：({{ jpg.output.size|numberFormatter }})， |
|
|
|
压缩率：{{jpg.compress}}%， |
|
|
|
压缩率：{{ jpg.compress }}%， |
|
|
|
总耗时：{{jpg.totalCost}}毫秒， |
|
|
|
总耗时：{{ jpg.totalCost }}毫秒， |
|
|
|
计算耗时：{{jpg.calcCost}}毫秒 |
|
|
|
计算耗时：{{ jpg.calcCost }}毫秒 |
|
|
|
</p> |
|
|
|
</p> |
|
|
|
<img :src="jpg.output.src"> |
|
|
|
<img :src="jpg.output.src"> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<el-row type="flex"> |
|
|
|
<el-row type="flex"> |
|
|
|
<span>压缩图片品质：{{jpg.quality}}</span> |
|
|
|
<span>压缩图片品质：{{ jpg.quality }}</span> |
|
|
|
<el-slider v-model="jpg.quality" :disabled="jpg.loading" :min="0" :max="100" style="flex: 1"/> |
|
|
|
<el-slider v-model="jpg.quality" :disabled="jpg.loading" :min="0" :max="100" style="flex: 1"/> |
|
|
|
</el-row> |
|
|
|
</el-row> |
|
|
|
<el-row type="flex" justify="center"> |
|
|
|
<el-row type="flex" justify="center"> |
|
|
|
@ -41,24 +41,24 @@ |
|
|
|
<el-button type="primary" @click="() => $refs.png.click()">选择图片</el-button> |
|
|
|
<el-button type="primary" @click="() => $refs.png.click()">选择图片</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-show="png.input.src" class="image-container"> |
|
|
|
<div v-show="png.input.src" class="image-container"> |
|
|
|
<p>原始图片：{{png.name}} ({{png.input.size|numberFormatter}})</p> |
|
|
|
<p>原始图片：{{ png.name }} ({{ png.input.size|numberFormatter }})</p> |
|
|
|
<img :src="png.input.src"> |
|
|
|
<img :src="png.input.src"> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-show="png.output.src" class="image-container"> |
|
|
|
<div v-show="png.output.src" class="image-container"> |
|
|
|
<p> |
|
|
|
<p> |
|
|
|
压缩后大小：({{png.output.size|numberFormatter}})， |
|
|
|
压缩后大小：({{ png.output.size|numberFormatter }})， |
|
|
|
压缩率：{{png.compress}}%， |
|
|
|
压缩率：{{ png.compress }}%， |
|
|
|
总耗时：{{png.totalCost}}毫秒， |
|
|
|
总耗时：{{ png.totalCost }}毫秒， |
|
|
|
计算耗时：{{png.calcCost}}毫秒 |
|
|
|
计算耗时：{{ png.calcCost }}毫秒 |
|
|
|
</p> |
|
|
|
</p> |
|
|
|
<img :src="png.output.src"> |
|
|
|
<img :src="png.output.src"> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<el-row type="flex"> |
|
|
|
<el-row type="flex"> |
|
|
|
<span>压缩图片品质：{{png.quality}}</span> |
|
|
|
<span>压缩图片品质：{{ png.quality }}</span> |
|
|
|
<el-slider v-model="png.quality" range :disabled="png.loading" :min="0" :max="100" style="flex: 1"/> |
|
|
|
<el-slider v-model="png.quality" range :disabled="png.loading" :min="0" :max="100" style="flex: 1"/> |
|
|
|
</el-row> |
|
|
|
</el-row> |
|
|
|
<el-row type="flex"> |
|
|
|
<el-row type="flex"> |
|
|
|
<span>压缩速度：{{png.speed}}</span> |
|
|
|
<span>压缩速度：{{ png.speed }}</span> |
|
|
|
<el-slider v-model="png.speed" :disabled="png.loading" :min="0" :max="10" style="flex: 1"/> |
|
|
|
<el-slider v-model="png.speed" :disabled="png.loading" :min="0" :max="10" style="flex: 1"/> |
|
|
|
</el-row> |
|
|
|
</el-row> |
|
|
|
<el-row type="flex" justify="center"> |
|
|
|
<el-row type="flex" justify="center"> |
|
|
|
@ -71,10 +71,10 @@ |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
<script> |
|
|
|
import {elError, elSuccess} from "@/utils/message" |
|
|
|
import {elError, elSuccess} from "@/utils/message" |
|
|
|
import {sub, mul, div} from "@/utils/math" |
|
|
|
import {sub, mul, div} from "@/utils/math" |
|
|
|
|
|
|
|
|
|
|
|
const commonData = () => ({ |
|
|
|
const commonData = () => ({ |
|
|
|
loading: false, |
|
|
|
loading: false, |
|
|
|
name: '', |
|
|
|
name: '', |
|
|
|
compress: 0, |
|
|
|
compress: 0, |
|
|
|
@ -89,9 +89,9 @@ |
|
|
|
size: 0, |
|
|
|
size: 0, |
|
|
|
src: '' |
|
|
|
src: '' |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
export default { |
|
|
|
name: "ImageCompressTest", |
|
|
|
name: "ImageCompressTest", |
|
|
|
data() { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
return { |
|
|
|
@ -170,13 +170,13 @@ |
|
|
|
elSuccess('压缩成功') |
|
|
|
elSuccess('压缩成功') |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
<style lang="scss" scoped> |
|
|
|
@import "~@/assets/styles/variables.scss"; |
|
|
|
@import "~@/assets/styles/variables.scss"; |
|
|
|
|
|
|
|
|
|
|
|
.container { |
|
|
|
.container { |
|
|
|
max-width: 1200px; |
|
|
|
max-width: 1200px; |
|
|
|
text-align: center; |
|
|
|
text-align: center; |
|
|
|
|
|
|
|
|
|
|
|
@ -217,5 +217,5 @@ |
|
|
|
.el-slider { |
|
|
|
.el-slider { |
|
|
|
margin-left: 20px; |
|
|
|
margin-left: 20px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
</style> |
|
|
|
|
toesbieya
6 years ago