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);
 });

结果:
在这里插入图片描述

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页