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

jincon 发表于 2015-02-26 18:31:01 发表在: php开发

localresizeimg-概述

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

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

直接上写好的demo了

HTML

01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
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

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

LocalResizeIMG前端HTML5本地压缩图片上传，兼容移动设备IOS,android的更多相关文章

  1. html5+js压缩图片上传

    最近在折腾移动站的开发,涉及到了一个手机里面上传图片.于是经过N久的折腾,找到一个插件,用法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  2. 基于html5的多图片上传，预览

    基于html5的多图片上传 本文是建立在张鑫旭大神的多文图片传的基础之上. 首先先放出来大神多图片上传的博客地址:http://www.zhangxinxu.com/wordpress/2011/09 ...

  3. WebUploader压缩图片上传

    WebUploader,由Baidu FEX 团队开发,以H5为主,FLASH为辅,兼容 IE6+,iOS 6+, android 4+,采用大文件分片并发上传,极大的提高了文件上传效率,看了官方文档 ...

  4. js压缩图片上传插件localResizeIMG

    示例 /** * 本地图片压缩后上传 */ $("#vfile").change(function(){ var _this = $(this); lrz(this.files[0 ...

  5. 基于前台vue,后台是spring boot的压缩图片上传

    本人是刚毕业的新手,最近公司的一个项目,前后端分离,前端Vue,后端使用spring boot.其中有一个需求是需要做前端上传的图片需要压缩才能上传.为此在网上查找资料,并做了简单的实现. 那么一步来 ...

  6. ios中摄像头/相册获取图片压缩图片上传服务器方法总结

    本文章介绍了关于ios中摄像头/相册获取图片,压缩图片,上传服务器方法总结,有需要了解的同学可以参考一下下.     这几天在搞iphone上面一个应用的开发,里面有需要摄像头/相册编程和图片上传的问 ...

  7. js 压缩图片 上传

    感谢,参考了以下作者的绝大部分内容 https://blog.csdn.net/tangxiujiang/article/details/78755292 https://blog.csdn.net/ ...

  8. HTML5 FileReader实现图片上传前预览

    如果你的浏览器支持Html5的FileReader的话,实现图片上传前进行预览是一件非常容易之事情. 在控制器,创建一个视图Action: jQuery代码: 实时演示一下: 下面内容于2014-11 ...

  9. HTML5移动端图片上传模块

    上传图片的功能是极为常用的,之前做过一个移动端上传文件的功能(基于jquery的),总结梳理一下. html <div class="uploadPic clearBox"& ...

随机推荐

  1. Easyui使用记录

    一天就这搞了这几行. 1. if else 可以嵌套: 2. 子页面调用父页面js,需要使用top.父页面js的方法. <script type="text/javascript&qu ...

  2. SQL基础知识总结（一）

    1.union 和union all 操作符 1)union内部的select语句必须拥有相同的列,列也必须有相似的数字类型.同时,每条select语句中列的顺序相同. union语法(结果集无重复) ...

  3. NOI2005维修数列 splay

    好题,错了不知道多少遍.这题其他几个操作都是比较经典的,多了一个最大子序列的.这时候对于当前的区间,最大子序列,可能使左区间的最值,可能是右区间的最值,也可能是整个区间的.所以维护lx[],rx[], ...

  4. session共享

    Nginx或者Squit反向代理到两台tomcat服务器 tomcat使用memcached tomcat连接memcached工具 cp session/*.jar /usr/local/tomca ...

  5. list 和 str

    list 和 str 两种类型数据,有不少相似的地方,也有很大的区别.本讲对她们做个简要比较,同时也是对前面有关两者的知识复习一下,所谓“温故而知新”. 相同点 都属于序列类型的数据 所谓序列类型的数 ...

  6. (Beta)Let's-Beta阶段展示博客

    康家华:http://www.cnblogs.com/AmazingMax/ 马阿姨:http://www.cnblogs.com/oushihuahua/ 刘彦熙:http://www.cnblog ...

  7. Ubuntu学习总结-06 安装 Nginx

    Nginx是由俄罗斯人(zhan dou min zu)开发的一款高性能的http和反向代理服务器,也可以用来作为邮件代理.相比较于其他的服务器,具有占用内存少,稳定性高等优势. 一 Ubuntu源码 ...

  8. linux(Debian)下安装与MySql的安装、卸载、配置及使用

    参考资料:http://www.cnblogs.com/xusir/p/3334217.html 以下是简要记录. 一.安装 安装:apt-get install mysql-server mysql ...

  9. iptables一些经常忘掉易混淆的参数

    -A:新增加一条规则,该规则在原规则的最后面 -p:规定应用于哪种数据包,例如:tcp,udp等 -d:(destination),表示目标IP或网络 -s:(source),表示源IP或网络 -j: ...

  10. WebSphere SSLC0008E 无法初始化 SSL 连接。未授权访问被拒绝，或者安全性设置已到期 解决方法

    昨天安装websphere服务器中间件,安装完毕之后,安装验证如下: 猜测是SSL协议版本过低的问题,于是打开IE高级设置: 勾线之后,启动管理控制台: 成功启动web界面如下: 登陆试试: