压缩图片-imageCompress

点击链接说得很清楚可以参考：
imageCompress用法

1.安装
npm install --save-dev html-image-compress

2.参数
new HtmlImageCompress(file, [options]);

1. file 通过 input:file 得到的文件
2. [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>