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. 国内公共DNS

    DNS(Domain Name System,域名系统),因特网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去记住能够被机器直接读取的IP数串.通过主机名,最终 ...

  2. 【OpenCV入门教程之一】 安装OpenCV：OpenCV 3.0 +VS 2013 开发环境配置

    图片太多,具体过程参照: [OpenCV入门教程之一] 安装OpenCV:OpenCV 3.0.OpenCV 2.4.8.OpenCV 2.4.9 +VS 开发环境配置 说下我这边的设置: 选择deb ...

  3. MVC升级以后出现"当前上下文中不存在ViewBag"的问题解决

    把自己的项目从MVC4升级到了MVC5,结果问题一大堆,View的设计环境出现了"当前上下文中不存在ViewBag"的问题: 虽然不影响编译,但是看了总是不爽,而且语法提示也没有了 ...

  4. Java设计模式-装饰模式（Decorator）

    顾名思义,装饰模式就是给一个对象增加一些新的功能,而且是动态的,要求装饰对象和被装饰对象实现同一个接口,装饰对象持有被装饰对象的实例,关系图如下: Source类是被装饰类,Decorator类是一个 ...

  5. Lucene -- 实时索引

    lucene的实时搜索可以分成:实时和近实时的搜索. 实时只能依靠内存了. 近实时可以用lucene中提供org.apache.lucene.index.DirectoryReader.open(In ...

  6. scanf的一些技巧

    一.scanf和gets 1.不同点: char string[50]; scanf("%s",string); //当遇到回车,空格和tab键会自动在字符串后面添加'\0',但是 ...

  7. Linux Kernel Synchronization && Mutual Exclusion、Linux Kernel Lock Mechanism Summarize

    目录 . 内核锁机制 . 同步与互斥 . 锁定内存总线原子操作 . 信号量 . 自旋锁 . RCU机制 . PERCPU变量 . 内存和优化屏障 . 读者/写者锁 . 大内核锁 . 互斥量 1. 内核 ...

  8. 802.11协议帧格式、Wi-Fi连接交互过程、无线破解入门研究

    相关学习资料 Linux黑客大曝光: 第8章 无线网络 无线网络安全攻防实战进阶 无线网络安全 黑客大曝光 第2版 http://zh.wikipedia.org/wiki/IEEE_802.11 h ...

  9. udp内网穿透 两个内网互联

    1,在有外网ip的机器上启动server. package udp; import java.net.DatagramPacket; import java.net.InetSocketAddress ...

  10. WWDC2014总结---For产品经理们

    一年一度的苹果开发者大会WWDC2014,在北京时间6月3日凌晨1点开始了,苹果发布了iOS8.OSX10.10等,苹果比以前更加开放了,网上东西很多很杂,但缺少从产品开发角度来梳理的文章. 我根据这 ...