HTML5实现微信拍摄上传照片功能


Posted in Javascript onApril 21, 2017

做了个微信的HTML5拍摄上传照片功能,问题重重...

前端代码

$(':file').on('change',function(){
  var file = this.files[0];
  var url = webkitURL.createObjectURL(file);

  /* 生成图片
  * ---------------------- */
  var $img = new Image();
  $img.onload = function() {

   //生成比例
   var width = $img.width,
     height = $img.height,
     scale = width / height;
   width = parseInt(800);
   height = parseInt(width / scale);

   //生成canvas
   var $canvas = $('#canvas');
   var ctx = $canvas[0].getContext('2d');
   $canvas.attr({width : width, height : height});
   ctx.drawImage($img, 0, 0, width, height);
   var base64 = $canvas[0].toDataURL('image/jpeg',0.5);

   //发送到服务端
   $.post('upload.php',{formFile : base64.substr(22) },function(data){
    $('#php').html(data);
   });

  }
  $img.src = url;

 });

后端代码

$base64 = $_POST['formFile'];
$IMG = base64_decode( $base64 );
file_put_contents('1.png', $IMG );

实测:

电脑端

chrome 版本29,上传成功,源图片3M,压缩后1024 * 比例,约250kb 通过!

移动端

android 版本4+,微信,点击上传无反应,在手机浏览器中打开可上传,拍摄约3M-,压缩后1024* 比例,约3M-,根本没压缩嘛!!! 失败!

iphone4 & 4s 版本6+ 微信,拍摄约3M-,压缩后1024 * 比例,约250kb 通过!

iphone5 版本6+ 微信,生成canvas变形。失败!

总结:系统级BUG,无解.... 这下不知道怎么办了..

--------------------------------------- 后续报告 2013年09月12日 ----------------------------------------------

找到个牛人写的javascript编译jpg的插件,javascript_jpeg_encoder。

用这个办法可以解决android无法压缩图片的问题。

目前还剩2个系统级BUG。

1. 微信android版本无法响应上传控件 input tyle=file;

2. iphone5 生成canvas失败,画面扭曲。

--------------------------------------- 后续报告2 2013年10月10日 ---------------------------------------------

同样有一位牛人写的 ios-imagefile-megapixel 插件,解决了iphone5+画面扭曲的问题。

目前还剩1个系统级BUG。

微信android版本无法响应上传控件 input tyle=file;

--------------------------------------- 后续报告3 2014年5月16日 ---------------------------------------------

目前所有问题都解决了,在github上建立了插件,有需要的朋友可以去获取一下,顺便说一下,时间过的真快。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
prototype Element学习笔记(Element篇三)
Oct 26 Javascript
十分钟打造AutoComplete自动完成效果代码
Dec 26 Javascript
为jQuery增加join方法的实现代码
Nov 28 Javascript
用jquery写的菜单从左往右滑动出现
Apr 11 Javascript
22点关于jquery性能优化的建议
May 28 Javascript
实例讲解jquery与json的结合
Jan 07 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
Nov 17 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
Feb 14 Javascript
常用的js方法合集
Mar 10 Javascript
React中上传图片到七牛的示例代码
Oct 10 Javascript
关于对TypeScript泛型参数的默认值理解
Jul 15 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 #jQuery
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
Apr 21 #Javascript
H5图片压缩与上传实例
Apr 21 #Javascript
H5手机端多文件上传预览插件
Apr 21 #Javascript
ES6新特性八:async函数用法实例详解
Apr 21 #Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
Apr 21 #Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 #jQuery
You might like
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
php数字游戏 计算24算法
2012/06/10 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
js 获取计算后的样式写法及注意事项
2013/02/25 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
2016/03/04 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
jQuery实现简单的tab标签页效果
2016/09/12 Javascript
javascript滚轮控制模拟滚动条
2016/10/19 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
2016/11/21 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
js实现动态显示时间效果
2017/03/06 Javascript
JavaScript实现购物车基本功能
2017/07/21 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
2018/08/22 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
2020/10/27 Javascript
详解Python中内置的NotImplemented类型的用法
2015/03/31 Python
python框架django基础指南
2016/09/08 Python
Python2和Python3.6环境解决共存问题
2018/11/09 Python
华为2019校招笔试题之处理字符串(python版)
2019/06/25 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
纯css3实现走马灯效果
2014/12/26 HTML / CSS
德国购买门票网站:ADticket.de
2019/10/31 全球购物
大学生职业规划范文:象牙塔生活的四年计划
2014/01/14 职场文书
优秀毕业生自荐信
2014/06/10 职场文书
信息与计算机科学职业规划范文:成为一艘有方向的船
2014/09/11 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
政风行风整改报告
2014/11/06 职场文书
商场收银员岗位职责
2015/04/07 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书
2019年中学生的思想品德评语集锦
2019/12/19 职场文书