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 相关文章推荐
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
Dec 10 Javascript
javascript实现下拉提示选择框
Dec 29 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
Mar 14 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
Dec 17 Javascript
vue.js学习笔记:如何加载本地json文件
Jan 17 Javascript
全面解析vue中的数据双向绑定
May 10 Javascript
详解Nuxt.js Vue服务端渲染摸索
Feb 08 Javascript
js array数组对象操作方法汇总
Mar 18 Javascript
elementUI Tree 树形控件的官方使用文档
Apr 25 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
Sep 25 Javascript
微信小程序实现选项卡滑动切换
Oct 22 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
php基础知识:控制结构
2006/12/13 PHP
php防注入,表单提交值转义的实现详解
2013/06/10 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
thinkphp项目部署到Linux服务器上报错“模板不存在”如何解决
2016/04/27 PHP
yii2 上传图片的示例代码
2018/11/02 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
2011/07/28 Javascript
jQuery实现获取绑定自定义事件元素的方法
2015/12/02 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
详解Vuejs2.0之异步跨域请求
2017/04/20 Javascript
JS路由跳转的简单实现代码
2017/09/21 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
浅谈使用nodejs搭建web服务器的过程
2020/07/20 NodeJs
[04:01]2014DOTA2国际邀请赛 TITAN告别Ohaiyo期望明年再战
2014/07/15 DOTA
python将文本转换成图片输出的方法
2015/04/28 Python
Python减少循环层次和缩进的技巧分析
2016/03/15 Python
python爬虫获取京东手机图片的图文教程
2017/12/29 Python
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
Django中信号signals的简单使用方法
2019/07/04 Python
Django 外键的使用方法详解
2019/07/19 Python
python 模拟贷款卡号生成规则过程解析
2019/08/30 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
python+appium+yaml移动端自动化测试框架实现详解
2020/11/24 Python
电大毕业生自我鉴定
2013/11/10 职场文书
售后求职信范文
2014/03/15 职场文书
党支部特色活动方案
2014/08/20 职场文书
2014年村支部书记四风对照检查材料思想汇报
2014/10/02 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
给学校的建议书400字
2015/09/14 职场文书
保险公司增员口号
2015/12/25 职场文书
详解CSS伪元素的妙用单标签之美
2021/05/25 HTML / CSS
详细了解MVC+proxy
2021/07/09 Java/Android
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle