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. DOM（四）事件流

    1.冒泡型事件 浏览器的事件模型分两种:捕获型事件和冒泡型事件.由于ie不支持捕获型事件,所以以下主要以冒泡型事件作为讲解.(dubbed bubbling)冒泡型指事件安装最特定的事件到最不特定的事 ...

  2. Ubuntu下vim的配置

    由于刚开始学习Linux,对佷多操作还不熟悉,遇到了一些困难,在这里记录一下. 1  安装vim.俺我现在的理解,vim有控制台版本和GUI版本.控制台版本貌似是Ubuntu自带的,可以在终端输入 v ...

  3. 【Matplotlib】 刻度设置(2)

    Tick locating and formatting 该模块包括许多类以支持完整的刻度位置和格式的配置.尽管 locators 与主刻度或小刻度没有关系,他们经由 Axis 类使用来支持主刻度和小 ...

  4. CentOS下crontab执行java程序

    阿里云CentOS收不到邮件 在crontab里配置执行脚本,脚本用来执行java程序,死活不执行.单独执行脚本可以运行. 查看crontab的日志文件,/var/log/cron,发现没有收到cro ...

  5. 洛谷P3386 【模板】二分图匹配

    匈牙利算法模板 /*by SilverN*/ #include<algorithm> #include<iostream> #include<cstring> #i ...

  6. JSON前端页面解析

    JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻量级的文本数据交换格式 JSON 独立于语言 * JSON 具有自我描述性,更 ...

  7. POJ1651Multiplication Puzzle（矩阵链乘变形）

    Multiplication Puzzle Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 8040   Accepted: ...

  8. Linq 中 Distinct 方法扩展

    原文链接 http://www.cnblogs.com/A_ming/archive/2013/05/24/3097062.html public static class LinqEx { publ ...

  9. Sublime的快捷键的使用

    Default Keymap 1. Ctrl+L 选择整行(按住-继续选择下行) 2. Ctrl+Shift+K(shhift+del) 删除整行, ctrl + KK 从光标处删之行尾,Ctrl+K ...

  10. 一大早居然有骗子还是傻子，真是莫名其妙的，QQ1913522040，一看就是刚申请不久的