Vue.js移动端图片压缩插件localResizeIMG

1、介绍：

  解决Webapp项目中上传图片时，拍照或者选择的图片太大，导致上传速度缓慢，用户体验差，高并发下，后台处理较大的文件压力大。
  为了降低类似问题带来的影响，我们采用Vue2.0压缩图片插件localResizeIMG（lrz），压缩图片。
  大体的思路：每次拍照或选择一张图片-然后压缩图片-预览上传。上传图片压缩插件是localResizeIMG ，基本原理是通过canvas渲染图片，再通过 toDataURL 方法压缩保存为base64字符串（根据项目需求），压缩效果很不错。

2、使用方式：

安装：

npm i lrz -save

引入：

在main.js里加入：import lrz from ‘lrz’

使用：

(1)：通过input file 获取图片，选择图片或者拍照。

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

(2)：使用函数：

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

(3)：说明

file：得到的图片文件，或者直接传入图片路径
{ options }：这个参数可以省略：有如下图几个属性：

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

then(rst)：promise返回成功的回调：

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

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

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

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

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

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

catch(err)：上传失败，异常处理。

always()：无论成功失败都会执行：

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

3、附加

(1)：兼容性：
兼容性IE10以上及大部分主流浏览器。

(2)：后端处理：
后端处理请查看。

(3)：API
查看具体说明。

(4)：逻辑源码
查看具体源码。