移动h5开发避免不了上传图片，一般我们使用html自带的控件input或者使用微信上传API。但微信上传API不是任何地方都可以使用的，使用html自带的控件input上传又免不了图片体积太大，上传不稳定。localResizeIMG4就是为此而生的。
本文演示版本localResizeIMG 4.9.35。
特点
兼容IOS，Android，PC、自动按需加载文件
支持压缩比例
支持原生JS、jQuery/Zepto
支持Promise特性
使用Base64
下载地址
localResizeIMG共有4个历史版本，每个版本间使用方法可能不一样。本文以最新稳定版本localResizeIMG4为例。
https://github.com/think2011/localResizeIMG/archive/4.9.35.zip
如何使用
页面引入
<script src="https://www.jb51.net/article/dist/lrz.bundle.js"></script>
html
<input type="file" capture="camera" accept="image/*">
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 = function () { // 处理错误 }; xhr.upload.onprogress = function (e) { // 上传进度 var percentComplete = ((e.loaded / e.total) || 0) * 100; }; // 添加参数 rst.formData.append('fileLen', rst.fileLen); rst.formData.append('xxx', '我是其他参数'); // 触发上传 xhr.send(rst.formData); /* ==================================================== */ return rst; }) .catch(function (err) { // 万一出错了，这里可以捕捉到错误信息 // 而且以上的then都不会执行 alert(err); }) .always(function () { // 不管是成功失败，这里都会执行 }); });
返回的rst对象数据示例：
{origin: File, base64: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD…iigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/Z", base64Len: 1507}
origin: File
lastModified: 1442482311173
lastModifiedDate: Thu Sep 17 2015 17:31:51 GMT+0800 (中国标准时间)
name: "upload-add.png"
size: 291
type: "image/png"
webkitRelativePath: ""
其中base64属性是带图片类型的base64编码，可直接用于img标签的src。如果后端需要将这个属性值转为图片保存，就要先去除图片类型，文章后面有示例。之前的版本localResizeIMG1会同时返回result.base64和result.clearBase64(不带图片类型的编码)。
使用jQuery/Zepto
$(function(){ $('input[name=logo]').on('change', function(){ lrz(this.files[0], {width: 640}) .then(function (rst) { $.ajax({ url: site_url + 'api/user/updLogo', type: 'post', data: {img: rst.base64}, dataType: 'json', timeout: 200000, error: doAjax.error, success: doAjax.success, }); }) .catch(function (err) { }) .always(function () { }); }); });
如果您的图片不是来自用户上传的，那么也可以直接传入图片路径：
lrz('./xxx/xx/x.png') .then(function (rst) { // 处理成功会执行 }) .catch(function (err){ // 处理失败会执行 }) .always(function () { // 不管是成功失败，都会执行 });
后端处理（PHP）
$base64_image_content = $_POST['img']; if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)){ $type = $result[2]; //jpeg //去除图片类型 $img = base64_decode(str_replace($result[1], '', $base64_image_content)); //返回文件流 } //使用AliOSS上传 $url = OSS::upload($img, $type);
其中$result内容：
Array ( [0] => data:image/jpeg;base64, [1] => data:image/jpeg;base64, [2] => jpeg )
完整例子（HTML+PHP）
请在服务器环境(如LAMP)运行。
index.html
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>移动端使用localResizeIMG4压缩图片</title> <script src="https://www.jb51.net/article/dist/lrz.bundle.js"></script> <script src="https://www.jb51.net/article/dist/zepto.min.js"></script> </head> <body> 上传图片<input type="file" capture="camera" accept="image/*"> <script> $(function(){ $('input[name=logo]').on('change', function(){ lrz(this.files[0], {width: 640}) .then(function (rst) { console.log(rst); $.ajax({ url: 'upload.php', type: 'post', data: {img: rst.base64}, dataType: 'json', timeout: 200000, success: function (response) { if (response.ecd == '0') { alert('成功'); return true; } else { return alert(response.msg); } }, error: function (jqXHR, textStatus, errorThrown) { if (textStatus == 'timeout') { a_info_alert('请求超时'); return false; } alert(jqXHR.responseText); } }); }) .catch(function (err) { }) .always(function () { }); }); }); </script> </body>
upload.php