lrz实现原理_移动端使用localResizeIMG4压缩图片

移动h5开发避免不了上传图片，一般我们使用html自带的控件input或者使用微信上传API。但微信上传API不是任何地方都可以使用的，使用html自带的控件input上传又免不了图片体积太大，上传不稳定。localResizeIMG4就是为此而生的。

本文演示版本localResizeIMG 4.9.35。

特点

兼容IOS，Android，PC、自动按需加载文件

支持压缩比例

支持原生JS、jQuery/Zepto

支持Promise特性

使用Base64

下载地址

localResizeIMG共有4个历史版本，每个版本间使用方法可能不一样。本文以最新稳定版本localResizeIMG4为例。

如何使用

页面引入

html

capture="camera"可以出现拍照；

accept="image/*"仅接受图片

通过change事件可以得到用户选择的图片。

使用原生js

document.querySelector('input').addEventListener('change', function () {

// this.files[0] 是用户选择的文件

lrz(this.files[0], {width: 1024})

.then(function (rst) {

// 把处理的好的图片给用户看看呗(可选)

var img = new Image();

img.src = rst.base64; //base64字符串

img.onload = function () {

document.body.appendChild(img);

};

return rst;

})

.then(function (rst) {

// 这里该上传给后端啦

/* ==================================================== */

// 原生ajax上传代码，所以看起来特别多，但绝对能用

// 其他框架，例如jQuery处理formData略有不同，请自行google，baidu。

var xhr = new XMLHttpRequest();

xhr.open('POST', 'http://localhost:5000/');

xhr.onload = function () {

if (xhr.status === 200) {

// 上传成功

} else {

// 处理其他情况

}

};

xhr.onerror = fun