移动端使用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.7fieldName {String}
后端接收的字段名,默认:file
返回结果
返回值是一个promise
对象
then(rst)
rst.formData
后端可处理的数据rst.file
压缩后的file对象(默认已经丢在rst.formData有一份了),需要注意的是如果压缩率太低的话,这个会是原始的file对象rst.fileLen
生成后的图片的大小,后端可以通过此值来校验是否传输完整rst.base64
生成后的图片base64,后端可以处理此字符串为图片,也直接用于img.src = base64rst.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、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
移动端使用localResizeIMG4压缩图片的更多相关文章
- 图片采用base64压缩,可以以字符串的形式传送base64给服务端转存为图片
(function () { var coverImage = document.querySelector('<div id="coverImage">file< ...
- 上传图片转为base64格式预览并压缩图片(不兼容IE9以下浏览器,兼容移动端ios,android)
前些天公司要求在微信移动端做上传图片并预览的功能,要求能够调用摄像头拍照并立即预览. 在网上搜了一些方法,开始自己写了个简单的功能实现代码.结果发现移动端拍照出来的图片动不动就2M+,又因为要批量上传 ...
- 移动端 H5 拍照 从手机选择图片,移动端预览,图片压缩,图片预览,再上传服务器
前言:最近公司的项目在做全网营销,要做非微信浏览器的wap 站 的改版,其中涉及到的一点技术就是采用H5 选择手机相册中的图片,或者拍照,再将获取的图片进行压缩之后上传. 这个功能模块主要有这5点比较 ...
- Android压缩图片到100K以下并保持不失真的高效方法
前言:目前一般手机的相机都能达到800万像素,像我的Galaxy Nexus才500万像素,拍摄的照片也有1.5M左右.这么大的照片上传到服务器,不仅浪费流量,同时还浪费时间. 在开发Android企 ...
- LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android
LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android jincon 发表于 2015-02-26 18:31:01 发表在: php开发 localresiz ...
- ios中摄像头/相册获取图片,压缩图片,上传服务器方法总结
相册 iphone的相册包含摄像头胶卷+用户计算机同步的部分照片.用户可以通过UIImagePickerController类提供的交互对话框来从相册中选择图像.但是,注意:相册中的图片机器路径无法直 ...
- 利用canvas压缩图片
现在手机拍的照片动不动就是几M,当用户上传手机里的照片时一个消耗流量大,一个上传时间长,为了解决这个问题,就需要压缩图片: 想法:利用canvas重绘图片,保持宽高比不变,具体宽高根本具体情况而定. ...
- JS实现图片base64转blob对象,压缩图片,预览图片,图片旋转到正确角度
base64转blob对象 /** 将base64转换为文件对象 * @param {String} base64 base64字符串 * */ var convertBase64ToBlob = f ...
- file上传图片,base64转换、压缩图片、预览图片、将图片旋转到正确的角度
/** * 将base64转换为文件对象 * (即用文件上传输入框上传文件得到的对象) * @param {String} base64 base64字符串 */ function convertBa ...
随机推荐
- sql server 远程连接不上解决思路
1.数据库是否允许远程连接: 1.1.0登陆SQL Server 2008(windows身份认证),登陆后右击,选择“属性”.左侧选择“安全性”,选中右侧的“SQL Server 和 Windows ...
- 使用hibernate可以优化的地方
a. 在查询字符串中,应该总是使用jdbc的占位符?,或使用使用命名参数:,不要自查询中使用字符串值来代替非常量值. b. Flush会影响性能,频繁刷新影响性能,尽量减少不必要的刷新. c. ...
- Linux系统简介
1.操作系统包括 系统调用.内核. Linux 也就是系统调用和内核那两层,当然直观的来看,我们使用的操作系统还包含一些在 其上运行的应用程序,比如文本编辑器,浏览器,电子邮件. 2.Linux 本身 ...
- LINUX 虚拟机克隆与网络配置
虚拟机克隆后,启动之后发现网卡没有启动.发现提示错误信息“Device eth0 does not seem to be present, delaying initialization.” 解决方法 ...
- 最小和(min)
题目描述: N 个数排成一排,你可以任意选择连续的若干个数,算出它们的和.问该如何选择才能 使得和的绝对值最小. 如:N=8 时,8个数如下: 1 2 3 4 5 6 ...
- 【转】Chrome快捷键
感谢原作者:http://www.cnblogs.com/mikalshao/archive/2010/11/03/1868568.html 标签页和窗口快捷键 Ctrl+N 打开新窗口. Ctrl+ ...
- Create Oracle Enterprise Manager repository data after restore a database from another server
1. Set password for SYS in password file: orapwd file=$ORACLE_HOME/dbs/orapw<ORACLE_SID> 2. Dr ...
- 仿QQ列表左滑删除
一直想写个仿QQ通讯列表左滑删除的效果,今天终于忙里偷闲,简单一个. 大概思路是这样的: 通过 ontouchstartontouchmoveontouchend 结合css3的平移. 不多说,直接上 ...
- bzoj 3718
题意:戳这里 思路:很容易发现对于一个车能否移动到最终的位置只要判断路径中得最大高度与自身高端之和是否>w即可. 那么就可以转化为逆序对得最大数问题..即对于每一辆车,判断有那些最初在他前面,而 ...
- Django如何搭建服务器
建立django站点: 新建Django项目,我这里是使用命令创建项目的. django-admin startproject HelloDjango 创建HelloDjango项目 然后进入到He ...