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. ASP.NET 访问共享文件夹

    配置代码: var dataProtection = new Microsoft.AspNet.DataProtection.DataProtectionProvider(new DirectoryI ...

  2. 1017关于EXPLAIN的语法

    转自博客 http://blog.csdn.net/zhuxineli/article/details/14455029 explain显示了MySQL如何使用索引来处理select语句以及连接表.可 ...

  3. 部署报表和 ReportViewer 控件 rdlc

    部署报表和 ReportViewer 控件 您可以将报表和 ReportViewer 控件作为应用程序的一部分自由发布.根据控件类型以及报表是配置为本地处理还是远程处理,部署要求会有很大不同.在同一个 ...

  4. Oracle 获取表结构信息

    通过Oracle中的user_tab_cols, user_col_comments, user_constraints, user_cons_columns表联合查询. user_tab_cols用 ...

  5. UVA 674 Coin Change(dp)

    UVA 674  Coin Change  解题报告 题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=87730#problem/ ...

  6. Hive篇--相关概念和使用二

    一.基本概念 Hive分桶: 1.概念 分桶表是对列值取哈希值的方式,将不同数据放到不同文件中存储.对于hive中每一个表.分区都可以进一步进行分桶.(可以对列,也可以对表进行分桶)由列的哈希值除以桶 ...

  7. php header运用细节

    http://www.111cn.net/phper/php-function/55872.htm http://blog.sina.com.cn/s/blog_7298f36f01011dxv.ht ...

  8. POJ1579:Function Run Fun

    Description We all love recursion! Don't we? Consider a three-parameter recursive function w(a, b, c ...

  9. retinex相关代码汇总

    混合方法 SSR.m matlab代码,本来是RGB,改成了处理灰度图像的. %%%%%%%%%%%%%%%RGB normalisation%%%%%%%%%%%%%%%%%%%%%% %its c ...

  10. Bootstrap源码解读之栅格化篇

    本文纯属自己研究所写笔记,如果有错误还请多多指教提出 版心(container) 版心:class名为.container的容器,其版心的宽度在各个屏幕设备下是不一样的值,版心两边就是留白. 各尺寸下 ...