移动端使用localResizeIMG4压缩图片

最近几天一直在研究前端实现图片的压缩显示与上传,以减小服务器端压力,对于昨天这篇 怎样实现前端裁剪上传图片功能 当然可以可以实现图片的压缩与上传,但对于一些新手来说,理解起来就不那么容易了,因为它涉及的知识点比较多。
今天介绍一款简单实用的移动端图片压缩展示与上传的插件 localResizeIMG4,并附上下载地址 点击下载

下面先来介绍并简单使用以下
####摘要:移动h5开发避免不了上传图片,一般我们使用html自带的控件input或者使用微信上传API。但微信上传API不是任何地方都可以使用的,使用html自带的控件input上传又免不了图片体积太大,上传不稳定。

移动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

如何使用

页面引入

javascript 代码

html
javascript 代码

capture="camera"可以出现拍照;
accept="image/*"仅接受图片

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

使用原生js

javascript 代码

返回的rst对象数据示例:
javascript 代码

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

使用jQuery/Zepto

javascript 代码

如果您的图片不是来自用户上传的,那么也可以直接传入图片路径:
javascript 代码

后端处理(PHP)

php代码

其中$result内容:
php代码

完整例子(HTML+PHP)

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

index.html
html 代码

upload.php
php代码

示例代码在github上:https://github.com/52fhy/localResizeIMG4/tree/master/lrz

参数文档

参数

javascript 代码

file 通过 input:file 得到的文件,或者直接传入图片路径

[options] 这个参数允许忽略
[ul]
[li]width {Number} 图片最大不超过的宽度,默认为原图宽度,高度不设时会适应宽度。[/li]
[li]height {Number} 同上[/li]
[li]quality {Number} 图片压缩质量,取值 0 - 1,默认为0.7[/li]
[li]fieldName {String} 后端接收的字段名,默认:file[/li]
[/ul]

返回结果

返回值是一个promise对象

then(rst)
[ul]
[li]rst.formData 后端可处理的数据[/li]
[li]rst.file 压缩后的file对象(默认已经丢在rst.formData有一份了),需要注意的是如果压缩率太低的话,这个会是原始的file对象[/li]
[li]rst.fileLen 生成后的图片的大小,后端可以通过此值来校验是否传输完整[/li]
[li]rst.base64 生成后的图片base64,后端可以处理此字符串为图片,也直接用于img.src = base64[/li]
[li]rst.base64Len 生成后的base64的大小,后端可以通过此值来校验是否传输完整 (如果采用base64上传方式)[/li]
[li]rst.origin 也就是原始的file对象,里面存了一些原始文件的信息,例如大小,日期等。[/li]
[li][/li]
[/ul]
catch(err)

always()

lrz的历史

[ul]
[li]lrz1,基于jquery,使用需要引用jquery.js、localResizeIMG.js、patch/mobileBUGFix.mini.js(客户端)。[/li]
[li]lrz2,基于原生js,却是用coffeescript写的 Orz, 有UI,存在已知BUG。[/li]
[li]lrz3,基于原生js,提供pc & mobile版本,修复BUG和疑问,再一次重构了代码,移除了UI,仅作为纯粹的工具,方便二次开发。[/li]
[li]lrz4,基于原生js,已升级到稳定版本,推荐使用。[/li]
[/ul]

lrz原理

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

如何自定义上传按钮

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

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

1、php读取和保存base64编码的图片内容 - fxhover的个人空间 - 开源中国社区
http://my.oschina.net/fxhover/blog/209277

2、参数文档 · think2011/localResizeIMG Wiki

https://github.com/think2011/localResizeIMG/wiki

3、think2011/localResizeIMG: 前端本地客户端压缩图片,兼容IOS,Android,PC、自动按需加载文件

https://github.com/think2011/localResizeIMG

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复