lrz实现原理_移动端图片压缩上传

[2017年文章]

前提更要：

1、压缩图片的几种方式：php、js

2、对移动端手机上传的图片进行压缩，lrz的原理和使用方法

3、对HHuploadify升级，lrz使其能够对图片进行压缩

本地客户端压缩图片js

1、作用

前端本地客户端压缩图片，兼容IOS，Android，PC：

2、原理：

canvas渲染图片，再通过 toDataURL 方法压缩保存为base64字符串

2.1 用户使用input file上传图片的时候，用filereader读取用户上传的图片数据(base64格式)

2.2 收到传入的文件后，创建一个 canvas 对象 和 blob 对象(其实也就是对应的文件引用，所以能被 img src直接引用)

2.3 创建 img 对象，标记允许跨域处理，src 设置为 blob，接下来就是开始压缩了。

2.4 开始压缩，获取图片旋转的方向，计算用户设置的尺寸，设置canvas

2.5 尽可能释放内存

2.6 获取到压缩后的base64格式图片数据，转成二进制塞入formdata，再通过XmlHttpRequest提交formdata

3、后端处理：

采用标准的文件上传方式，而且这种方式传输量也会小一些

前端发送rst.formData给后端

后端接收 rst.file(可配置)字段，接着按常规处理

4、使用：

方法一、

//如果您的图片来自用户拍摄或者上传的，您需要一个input file来获取图片。

document.querySelector('#file').addEventListener('change', function () {

lrz(this.files[0])

.then(function (rst) {

// 处理成功会执行

console.log(rst);

})

.catch(function (err) {

// 处理失败会执行

})

.always(function () {

// 不管是成功失败，都会执行

});

});

方式二：

//如果您的图片不是来自用户上传的，那么也可以直接传入图片路径。

lrz('./xxx/xx/x.png')

.then(function (rst) {

// 处理成功会执行

})

.catch(function (err){

// 处理失败会执行

})

.always(function () {

// 不管是成功失败，都会执行

});

lrz(file, [options]);

file 通过 input:file 得到的文件，或者直接传入图片路径

[options] 这个参数允许忽略

width {Number} : 图片最大不超过的宽度，默认为原图宽度，高度不设时会适应宽度。

height {Number} 同上

quality {Number} 图片压缩质量，取值 0 - 1，默认为0.7

fieldName {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)

万一出错了，这里可以捕捉到错误信息，而且以上的then都不会执行

always()

不管是成功失败，这里都会执行

在移动端图片上传的时候，用户传的都是手机本地图片，而本地图片一般都相对比较大(2-4M)，如果用户用的是移动流量，完全把图片上传显然不是一个好办法。

HHuploadify 升级

$('.upload').each(function(idx){

$(this).HHuploadify({

auto:true,

isSingle:false,

fileSizeLimit:10240,

islrz:true,//是否使用图片压缩

imgwith:800//图片最大不超过的宽度，默认为原图宽度，高度不设时会适应宽度。

imgheight：null,//同上

imgquality:0.7,//图片压缩质量，取值 0 - 1，默认为0.7

uploader:'//api.shop.ci123.com/upload/pic/',

onUploadSuccess: function(file,data) {

data = eval('('+data+')');

$("input[name='orignal_"+(idx+1)+"']").val(data.url);

}

});

});