vue使用lrz进行压缩图片

在vue中使用lrz去压缩图片

lrz是一款压缩图片成base64的插件，兼容IE10以上及大部分非IE浏览器（chrome、微信什么的）

但是lrz团队已经放弃维护了，所以使用的时候需要谨慎

使用的时候注意，有可能会和你本身代码的插件进行冲突，我遇到报错，但是怎么都解决不了，后来排查到我的项目环境有问题，然后重置之前的环境，再进行使用的时候就正常了，具体是插件冲突还是什么情况，暂时还没找到具体的原因！

下包：

通过npm或者bower方式进行下载

npm i lrz（推荐）
bower install lrz

通过sdn方式进行引用

<script src="./lrz.bundle.js"></script>

使用：

方式1：

<input id="file" type="file" accept="image/*" />
通过change事件可以获取得到用户选择的图片
document.querySelector('#file').addEventListener('change', function () {
    lrz(this.files[0])
        .then(function (rst) {
            // 处理成功会执行
            console.log(rst);
        })
        .catch(function (err) {
            // 处理失败会执行
        })
        .always(function () {
            // 不管是成功失败，都会执行
        });
});

方式2：

如果不是采用传入图片的形式，那么可以采用传递路径的方式获取

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

关于lrz的参数:

lrz(file,[option])
//可选参数
//1、file 通过 input:file 得到的文件，或者直接传入图片路径
//2、[options] 这个参数允许忽略
//3、width {Number} 图片最大不超过的宽度，默认为原图宽度，高度不设时会适应宽度。
//4、height {Number} 同上
//5、quality {Number} 图片压缩质量，取值 0 - 1，默认为0.7
//6、fieldName {String} 后端接收的字段名，默认：file

返回结果:

//返回结果
//返回值是一个promise对象
then(rst)
catch(err)

返回结果的解读:

rst.formData //后端可处理的数据
rst.file //压缩后的file对象（默认已经丢在rst.formData有一份了），需要注意的是如果压缩率太低的话，这个会是原始的file对象
rst.fileLen //生成后的图片的大小，后端可以通过此值来校验是否传输完整
rst.base64 //生成后的图片base64，后端可以处理此字符串为图片，也直接用于img.src = base64
rst.base64Len //生成后的base64的大小，后端可以通过此值来校验是否传输完整 (如果采用base64上传方式)
rst.origin //也就是原始的file对象，里面存了一些原始文件的信息，例如大小，日期等。

demo:

 lrz(
     "http://localhost:8080/img/logo.82b9c7a5.png"
     ).then((res) => {
     console.log(res);
 });

结果：