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

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'];

05
preg_match("/data:image\/(.*);base64,/",$data,$res);

06
$ext = $res[1];

07
if(!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);

12
if (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
}

下载地址：

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

archoncap

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

localresizeimg-概述

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

公告