移动端使用localResizeIMG4压缩图片

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

本文演示版本localresizeimg 4.9.35。

兼容ios，android，pc、自动按需加载文件

支持压缩比例

支持原生js、jquery/zepto

支持promise特性

使用base64

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

<a href="https://github.com/think2011/localresizeimg/archive/4.9.35.zip">https://github.com/think2011/localresizeimg/archive/4.9.35.zip</a>

html

<code>capture="camera"</code>可以出现拍照；

<code>accept="image/*"</code>仅接受图片

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

返回的<code>rst</code>对象数据示例：

其中<code>base64</code>属性是带图片类型的base64编码，可直接用于img标签的src。如果后端需要将这个属性值转为图片保存，就要先去除图片类型，文章后面有示例。之前的版本localresizeimg1会同时返回<code>result.base64</code>和<code>result.clearbase64</code>(不带图片类型的编码)。

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

其中<code>$result</code>内容：

请在服务器环境(如lamp)运行。

index.html

upload.php

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

<code>[options]</code> 这个参数允许忽略

<code>width {number}</code> 图片最大不超过的宽度，默认为原图宽度，高度不设时会适应宽度。

<code>height {number}</code> 同上

<code>quality {number}</code> 图片压缩质量，取值 0 - 1，默认为0.7

<code>fieldname {string}</code> 后端接收的字段名，默认：file

返回值是一个<code>promise</code>对象

<code>then(rst)</code>

<code>rst.formdata</code> 后端可处理的数据

<code>rst.file</code> 压缩后的file对象（默认已经丢在rst.formdata有一份了），需要注意的是如果压缩率太低的话，这个会是原始的file对象

<code>rst.filelen</code> 生成后的图片的大小，后端可以通过此值来校验是否传输完整

<code>rst.base64</code> 生成后的图片base64，后端可以处理此字符串为图片，也直接用于img.src = base64

<code>rst.base64len</code> 生成后的base64的大小，后端可以通过此值来校验是否传输完整 (如果采用base64上传方式)

<code>rst.origin</code> 也就是原始的file对象，里面存了一些原始文件的信息，例如大小，日期等。

<code>catch(err)</code>

<code>always()</code>

lrz1，基于jquery，使用需要引用jquery.js、localresizeimg.js、patch/mobilebugfix.mini.js（客户端）。

lrz2，基于原生js，却是用coffeescript写的 orz, 有ui，存在已知bug。

lrz3，基于原生js，提供pc &amp; mobile版本，修复bug和疑问，再一次重构了代码，移除了ui，仅作为纯粹的工具，方便二次开发。

lrz4，基于原生js，已升级到稳定版本，推荐使用。

基本原理是通过canvas渲染图片，再通过 todataurl 方法压缩保存为base64字符串（能够编译为jpg格式的图片）。

默认的上传按钮不好看，而且安卓和iphone也不一样。需要进行统一：

原理就是使用背景图，把input本身透明度设置为0.

1、php读取和保存base64编码的图片内容 - fxhover的个人空间 - 开源中国社区

<a href="http://my.oschina.net/fxhover/blog/209277">http://my.oschina.net/fxhover/blog/209277</a>

2、参数文档 · think2011/localresizeimg wiki

<a href="https://github.com/think2011/localresizeimg/wiki">https://github.com/think2011/localresizeimg/wiki</a>

3、think2011/localresizeimg: 前端本地客户端压缩图片，兼容ios，android，pc、自动按需加载文件

<a href="https://github.com/think2011/localresizeimg">https://github.com/think2011/localresizeimg</a>