【www.bbyears.com--微信】
移动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
如何使用
页面引入
<scriptsrc=></scriptsrc=>
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) {
// 把处理的好的图片给用户看看呗（可选）
varimg =newImage();
img.src = rst.base64;//base64字符串
img.onload =function() {
document.body.appendChild(img);
};
returnrst;
})
.then(function(rst) {
// 这里该上传给后端啦
/* ==================================================== */
// 原生ajax上传代码，所以看起来特别多，但绝对能用
// 其他框架，例如jQuery处理formData略有不同，请自行google，baidu。
varxhr =newXMLHttpRequest();
xhr.open('POST','http://localhost:5000/');
xhr.onload =function() {
if(xhr.status === 200) {
// 上传成功
}else{
// 处理其他情况
}
};
xhr.onerror =function() {
// 处理错误
};
xhr.upload.onprogress =function(e) {
// 上传进度
varpercentComplete = ((e.loaded / e.total) || 0) * 100;
};
// 添加参数
rst.formData.append('fileLen', rst.fileLen);
rst.formData.append('xxx','我是其他参数');
// 触发上传
xhr.send(rst.formData);
/* ==================================================== */
returnrst;
})
.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
<scriptsrc=></scriptsrc=>
<scriptsrc=></scriptsrc=>
上传图片
<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 == Ɔ") { 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>
upload.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));//返回文件流
}
//var_dump($_POST); //string(1507) "data:image/jpeg;base64,/9j/4AAQSkZJR...
//var_dump($result); //"data:image/jpeg;base64," "data:image/jpeg;base64," "jpeg"
//var_dump($img); //返回的是资源，直接使用可以显示图片
/* 输出到文件 */
//方式一：直接使用file_put_contents
$tmp_file= time().'.'.$type;
//file_put_contents($tmp_file, $img); //可以直接将文件流保存为本地图片
//方式二：先转换为GD图像资源，再生成文件或显示输出
$im= imagecreatefromstring($img);//resource(2) of type (gd) 图像资源
imagejpeg ($im,$tmp_file);//图像流（image）以 JPEG 格式输出到标准输出(浏览器或者文件)
//或者使用AliOSS上传
//$url = OSS::upload($img, $type);
returnajaxReturn($tmp_file);
functionajaxReturn($data=array(),$code= 0,$msg='成功'){
$result=array(
'result'=>$data,
'ecd'=>$code,
'msg'=>$msg,
);
echojson_encode($result);
exit;
}
示例代码在github上：https://github.com/52fhy/localResizeIMG4/tree/master/lrz
参数文档
参数
lrz(file, [options]);
file 通过 input:file 得到的文件，或者直接传入图片路径
返回结果
返回值是一个promise对象
lrz的历史
lrz1，基于jquery，使用需要引用jquery.js、localResizeIMG.js、patch/mobileBUGFix.mini.js（客户端）。
lrz2，基于原生js，却是用coffeescript写的 Orz, 有UI，存在已知BUG。
lrz3，基于原生js，提供pc & mobile版本，修复BUG和疑问，再一次重构了代码，移除了UI，仅作为纯粹的工具，方便二次开发。
lrz4，基于原生js，已升级到稳定版本，推荐使用。
lrz原理
word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: " sans="" font-size:="" font-style:="" font-variant-ligatures:="" font-variant-caps:="" font-weight:="" letter-spacing:="" orphans:="" text-align:="" text-indent:="" text-transform:="" white-space:="" widows:="" word-spacing:="" -webkit-text-stroke-width:="">基本原理是通过canvas渲染图片，再通过 toDataURL 方法压缩保存为base64字符串（能够编译为jpg格式的图片）。
详见WIKI
如何自定义上传按钮
默认的上传按钮不好看，而且安卓和iPhone也不一样。需要进行统一：
原理就是使用背景图，把input本身透明度设置为0.
1、php读取和保存base64编码的图片内容 - fxhover的个人空间 - 开源中国社区
2、参数文档 ・ think2011/localResizeIMG Wiki
https://github.com/think2011/localResizeIMG/wiki
3、think2011/localResizeIMG: 前端本地客户端压缩图片，兼容IOS，Android，PC、自动按需加载文件
https://github.com/think2011/localResizeIMG
以上就是本文的全部内容，希望对大家的学习有所帮助
[options] 这个参数允许忽略
width {Number} 图片最大不超过的宽度，默认为原图宽度，高度不设时会适应宽度。
height {Number} 同上
quality {Number} 图片压缩质量，取值 0 - 1，默认为0.7
fieldName {String} 后端接收的字段名，默认：file
then(rst)
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)
always()