点击链接说得很清楚可以参考:
imageCompress用法
1.安装
npm install --save-dev html-image-compress
2.参数
new HtmlImageCompress(file, [options]);
- file 通过 input:file 得到的文件
- [options] 这个参数允许忽略
width {Number} 图片最大不超过的宽度,默认为原图宽度,高度不设时会适应宽度。
height {Number} 同上
quality {Number} 图片压缩质量,取值 0 - 1,默认为0.7 * imageType {String} 图片类型 ,默认 'image/jpeg'
3.代码
<template>
<div>
压缩图片:
<input id="file" type="file" accept="image/*" @change="uploadFun" />
<img alt="" id="img">
</div>
</template>
<script>
// 模块默认输出 图片压缩的构造器
import HtmlImageCompress from 'html-image-compress'
export default {
data(){
return{
}
},
mounted(){
},
methods:{
uploadFun(event){
let file = event.target.files[0]
var htmlImageCompress = new HtmlImageCompress(file,{quality:0.7})
htmlImageCompress.then(function(result){
// 成功后执行
// var file = result.file; // 压缩后的图片文件(file)对象
// var fileSize = result.fileSize // 压缩后的图片文件(file)大小
// var base64 = result.base64; // 压缩后的base64图片
// var origin = result.origin; // 压缩前的图片文件(file)对象
document.getElementById('img').src = result.base64;
})
.catch(function () {
console.log('失败')
// 处理失败会执行
})
},
}
}
</script>
<style scoped>
img{
width: 300px;
}
</style>
网友评论