移动端使用localResizeIMG4压缩图片
移动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="./dist/lrz.bundle.js"></script>
html
<input type="file" capture="camera" accept="image/*" name="logo" id="file">
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="./dist/lrz.bundle.js"></script> <script src="./dist/zepto.min.js"></script> </head> <body> 上传图片<input type="file" capture="camera" accept="image/*" name="logo" id="file"> <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
<?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); //返回的是资源,直接使用<img src="$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); return ajaxreturn($tmp_file); function ajaxreturn($data = array(), $code = 0, $msg = '成功'){ $result = array( 'result' => $data, 'ecd' => $code, 'msg' => $msg, ); echo json_encode($result); exit; }
示例代码在github上:https://github.com/52fhy/localresizeimg4/tree/master/lrz
参数文档
参数
lrz(file, [options]);
- file 通过 input:file 得到的文件,或者直接传入图片路径
- [options] 这个参数允许忽略
- width {number} 图片最大不超过的宽度,默认为原图宽度,高度不设时会适应宽度。
- height {number} 同上
- quality {number} 图片压缩质量,取值 0 - 1,默认为0.7
- fieldname {string} 后端接收的字段名,默认:file
返回结果
返回值是一个promise对象
- 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()
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原理
基本原理是通过canvas渲染图片,再通过 todataurl 方法压缩保存为base64字符串(能够编译为jpg格式的图片)。
详见wiki
如何自定义上传按钮
默认的上传按钮不好看,而且安卓和iphone也不一样。需要进行统一:
原理就是使用背景图,把input本身透明度设置为0.
<div style="background:url(images/upload-add.png) no-repeat right/40px;"> <input type="file" capture="camera" accept="image/*" name="logo" id="file" class="selectinput" style="width:100%;opacity:.01"> </div>
1、 - fxhover的个人空间 - 开源中国社区
2、参数文档 · think2011/localresizeimg wiki
https://github.com/think2011/localresizeimg/wiki
3、think2011/localresizeimg: 前端本地客户端压缩图片,兼容ios,android,pc、自动按需加载文件
https://github.com/think2011/localresizeimg
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。