Vue.js移动端图片压缩---localResizeIMG

今天工作，做到图片上传的，后端说让我压缩了之后再发送请求，好吧，之前都没有做过压缩，这是又要让我get一种技能的节奏，于是百度找了一圈，发现一个应该是可以用的---localResizeIMG

遗憾的是，看到了笔着这样的说明：

 

 本来想换一个，可是看到这个评价还可以，于是就决定用这个了

根据他的说明，先获取

npm i lrz

例子1：

<input type="file"  accept="image/*" @change="compressImg" capture="camera" />  
accept是为了规定通过文件上传来提交的文件的类型，capture是webApp中捕获到系统默认的设备，camera--照相机；camcorder--摄像机；microphone--录音。

使用函数：

compressImg(e){
    if (e.target.files){
      // lrz(file,[ options ])
      lrz( e.target.files[0], [ options ] )  
            .then(function(rst) {
                //成功时执行
            }).catch(function(error) {
                //失败时执行
            }).always(function() {
                //不管成功或失败，都会执行
            })
    };
}

[options]可以有下面几个属性：

属性 值类型 属性说明
width number 图片最大的宽度，默认为原图的宽度
height number 图片最大的高度，默认为原图的高度
quality number 图片压缩质量，取值0-1，默认为0.7
filedName string 后端接收的字段名，默认为 ‘file’

成功回调：

rst.formData; //后端可处理的数据；

rst.file; //压缩后的file对象（默认应丢在rst.formData里面），需要注意的是：如果压缩率太大的话，这个会是原始的file对象；

rst.fileLen; //生成后的图片大小，后端可通过此值来校验是否传输完整;

rst.base64; //生成后的图片base64，后端可以处理此字符串为图片，也直接用于img.src = base64；

rst.base64Len; //生成后的base64的大小，后端可以通过此值来校验是否传输完整 (如果采用base64上传方式)；

rst.origin; //也就是原始的file对象，里面存了一些原始文件的信息，例如大小，日期等；

由于我是用插件写的，所以不用清空，如果需要的话，可以在always中调用

e.target.value = null; //清空上传value的值

具体参数即使用可以看相关文档：https://github.com/think2011/localResizeIMG/wiki/2.-%E5%8F%82%E6%95%B0%E6%96%87%E6%A1%A3

 

方式2：

如果图片不是来自用户上传的，也可以直接传路径：

lrz('./xxx/xx/x.png')
        .then(function (rst) {
            // 处理成功会执行
        })
        .catch(function (err){
            // 处理失败会执行
        })
        .always(function () {
            // 不管是成功失败，都会执行
        });

 

 

 

具体可以看他的git上面的说明：https://github.com/think2011/localResizeIMG