LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android

localresizeimg-概述

  • 通常压缩图片需要上传到后端,由后端处理。
  • 但是如果要上传的图片很大,特别是手机当场拍摄下来的照片(约2M+),那样效率会很低,用户也不会愿意等待。
  • 现在能够由前端本地压缩的话,效率将会极大的提升。


这个玩意很强大的地方就在于他可以在HTML5 前端压缩 ,大大加快了上传速度,以及节约流量。

直接上写好的demo了

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script src="lrz.mobile.min.js"></script>
 </head>

 <body>
 
  <input type="file" capture="camera" />
  <script>
	var input = document.querySelector('input');
	input.onchange = function () {
		lrz(this.files[0], {width: 100}, function (results) {
		  // 你需要的数据都在这里,可以以字符串的形式传送base64给服务端转存为图片。
		  console.log(results); 

		                  // 发送到后端
                var xhr = new XMLHttpRequest();
                var data = {
                    base64: results.base64,
                    size: results.base64.length // 校验用,防止未完整接收
                };
                xhr.open('POST', '1.php');
                xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        var result = JSON.parse(xhr.response);
                        result.error
                            ? alert('服务端错误,未能保存图片')
                            //: demo_report('服务端实存的图片', result.src, result.size);
							: alert('上传OK');
                    }
                };
                xhr.send(JSON.stringify(data)); // 发送base64
		});
	}
  </script>
 </body>
</html>
重要的是很多的人不知道这个工具是后端该如何处理,所以贴出php的代码:

<?php
$base64=file_get_contents("php://input"); //获取输入流
$base64=json_decode($base64,1);
$data = $base64['base64'];
preg_match("/data:image\/(.*);base64,/",$data,$res);
$ext = $res[1];
if(!in_array($ext,array("jpg","jpeg","png","gif"))){
	echo json_encode(array("error"=>1));die;
}
$file=time().'.'.$ext;
$data = preg_replace("/data:image\/(.*);base64,/","",$data);
if (file_put_contents($file,base64_decode($data))===false) {
	echo json_encode(array("error"=>1));
}else{
	echo json_encode(array("error"=>0));
}


下载地址:

https://github.com/think2011/localResizeIMG3/releases

关键词: 移动端上传图片 , localresizeimg

上一篇: 使用phantomjs给网页生成图片快照
下一篇: 总结下PHP获取Post的原始数据几种方法

#1
回复 Cesc 2015-06-15, 3:29 PM
提醒:需要动态获取图片的宽度,否则可能会导致图片模糊
发表评论

评论内容 (必填):