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

localresizeimg-概述

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

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

直接上写好的demo了

HTML

 
     01<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 
     02"http://www.w3.org/TR/html4/loose.dtd">
 
     03<html>
 
     04 <head>
 
     05  <title> New Document </title>
 
     06  <meta name="Generator" content="EditPlus">
 
     07  <meta name="Author" content="">
 
     08  <meta name="Keywords" content="">
 
     09  <meta name="Description" content="">
 
     10  <script src="lrz.mobile.min.js"></script>
 
     11 </head>
 
     12 
 
     13 <body>
 
     14  
 
     15  <input type="file" capture="camera" />
 
     16  <script>
 
     17    var input = document.querySelector('input');
 
     18    input.onchange = function () {
 
     19        lrz(this.files[0], {width: 100}, function (results) {
 
     20          // 你需要的数据都在这里，可以以字符串的形式传送base64给服务端转存为图片。
 
     21          console.log(results);
 
     22 
 
     23                          // 发送到后端
 
     24                var xhr = new XMLHttpRequest();
 
     25                var data = {
 
     26                    base64: results.base64,
 
     27                    size: results.base64.length // 校验用，防止未完整接收
 
     28                };
 
     29                xhr.open('POST', '1.php');
 
     30                xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
 
     31                xhr.onreadystatechange = function () {
 
     32                    if (xhr.readyState === 4 && xhr.status === 200) {
 
     33                        var result = JSON.parse(xhr.response);
 
     34                        result.error
 
     35                            ? alert('服务端错误，未能保存图片')
 
     36                            //: demo_report('服务端实存的图片', result.src, result.size);
 
     37                            : alert('上传OK');
 
     38                    }
 
     39                };
 
     40                xhr.send(JSON.stringify(data)); // 发送base64
 
     41        });
 
     42    }
 
     43  </script>
 
     44 </body>
 
     45</html>

重要的是很多的人不知道这个工具是后端该如何处理，所以贴出php的代码：

 
     01<?php
 
     02$base64=file_get_contents("php://input"); //获取输入流
 
     03$base64=json_decode($base64,1);
 
     04$data = $base64['base64'];
 
     05preg_match("/data:image\/(.*);base64,/",$data,$res);
 
     06$ext = $res[1];
 
     07if(!in_array($ext,array("jpg","jpeg","png","gif"))){
 
     08    echo json_encode(array("error"=>1));die;
 
     09}
 
     10$file=time().'.'.$ext;
 
     11$data = preg_replace("/data:image\/(.*);base64,/","",$data);
 
     12if (file_put_contents($file,base64_decode($data))===false) {
 
     13    echo json_encode(array("error"=>1));
 
     14}else{
 
     15    echo json_encode(array("error"=>0));
 
     16}