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. new-nav-js

    'use strict';define([ 'jquery'], function($) { var nav = { init : function() { $("#burger-menu& ...

  2. selenium ide 录制回放link链接报错

    回放是出现以下错误: 也就是回放点击打开新的链接时出现这个错误, 这个问题说的是 点击此链接会新打开一个窗口 selenium1是不支持多窗口切换的 因此会卡在这里,也就录制不支持这个操作,但是很多书 ...

  3. shell中一维数组值得获取

    (1)数组的定义 root@tcx4440-03:~# a=(1 2 3 4) root@tcx4440-03:~# echo ${a[1]}2 root@tcx4440-03:~# a[0]=1ro ...

  4. 【bzoj1042】 HAOI2008—硬币购物

    http://www.lydsy.com/JudgeOnline/problem.php?id=1042 (题目链接) 题意 共有4种硬币,面值分别为c1,c2,c3,c4.某人去商店买东西,去了to ...

  5. codeforces 719A：Vitya in the Countryside

    Description Every summer Vitya comes to visit his grandmother in the countryside. This summer, he go ...

  6. Linux数据包路由原理、Iptables/netfilter入门学习

    相关学习资料 https://www.frozentux.net/iptables-tutorial/cn/iptables-tutorial-cn-1.1.19.html http://zh.wik ...

  7. Android消息通知（notification）和PendingIntent传值

    通知栏的自定义布局:转:http://blog.csdn.net/vipzjyno1/article/details/25248021 拓展 实现自定义的通知栏效果: 这里要用到RemoteViews ...

  8. QA要懂的Linux命令

    <一>软件安装相关QA经常需要安装测试软件(jmeter.Mock.python环境搭建.java环境搭建),或者配置测试环境(nginx.ci等),需要了解linux下如何安装软件.在工 ...

  9. eclipse中使用git

    有的eclipse已经自带了Git了,就不用安装了.如果,想重新安装,可以先卸载GIT,卸载 不同eclipse卸载不一样: 1.在Eclipse中依次点击菜单"Help"-> ...

  10. ExtJS入门教程06，grid分页的实现

    前面两篇内容分别介绍了extjs grid的基本用法和extjs grid异步加载数据,这篇文章将介绍extjs grid的分页. 数据量大的时候我们必须用到分页,结合上一篇的异步加载数据,今天我们就 ...