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 相关文章推荐
在网页中屏蔽快捷键
Sep 06 Javascript
类之Prototype.js学习
Jun 13 Javascript
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
Oct 26 Javascript
JS操作JSON方法总结(推荐)
Jun 14 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
快速解决处理后台返回json数据格式的问题
Aug 07 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
Aug 08 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
Sep 30 Javascript
three.js实现圆柱体
Dec 30 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
Aug 20 Javascript
使用layui的layer组件做弹出层的例子
Sep 27 Javascript
浅析TypeScript 命名空间
Mar 19 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
Yii框架在页面输出执行sql语句以方便调试的实现方法
2014/12/24 PHP
php字符串过滤与替换小结
2015/01/26 PHP
PHP实现自动识别Restful API的返回内容类型
2015/02/07 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
struts2 jquery 打造无限层次的树
2009/10/23 Javascript
兼容主流浏览器的iframe自适应高度js脚本
2014/01/10 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
微信小程序 点击控件后选中其它反选实例详解
2017/02/21 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
2017/05/12 Javascript
详解webpack+vue-cli项目打包技巧
2017/06/17 Javascript
webpack实现热加载自动刷新的方法
2017/07/30 Javascript
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
2019/01/24 Javascript
vue滑动吸顶及锚点定位的示例代码
2020/05/10 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
[46:44]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第二场 3月7日
2021/03/11 DOTA
python多线程编程中的join函数使用心得
2014/09/02 Python
Python随机生成数据后插入到PostgreSQL
2016/07/28 Python
基于Django的ModelForm组件(详解)
2017/12/07 Python
python requests 库请求带有文件参数的接口实例
2019/01/03 Python
python 的topk算法实例
2020/04/02 Python
解决pycharm下pyuic工具使用的问题
2020/04/08 Python
Django 解决开发自定义抛出异常的问题
2020/05/21 Python
Python错误的处理方法
2020/06/23 Python
Python 如何对文件目录操作
2020/07/10 Python
美国电力供应商店/电气批发商:USESI
2018/10/12 全球购物
《自然之道》教学反思
2014/02/11 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
在教室放鞭炮的检讨书
2014/09/28 职场文书
2019大学生暑期实习心得总结
2019/08/21 职场文书
Mysql Online DDL的使用详解
2021/05/20 MySQL
Go语言测试库testify使用学习
2022/07/23 Golang