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 相关文章推荐
(function($){...})(jQuery)的意思
Jul 22 Javascript
很好用的js日历算法详细代码
Mar 07 Javascript
使用jquery.upload.js实现异步上传示例代码
Jul 29 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
Oct 30 Javascript
js实现两点之间画线的方法
May 12 Javascript
jQuery时间轴插件使用详解
Jul 16 Javascript
jquery插件uploadify多图上传功能实现代码
Aug 12 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
Feb 14 Javascript
vue 注册组件的使用详解
May 05 Javascript
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
vue实现在线翻译功能
Sep 27 Javascript
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
推荐三款日期选择插件(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
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
php实现zip压缩文件解压缩代码分享(简单易懂)
2014/05/10 PHP
cakephp打印sql语句的方法
2015/02/13 PHP
php 流程控制switch的简单实例
2016/06/07 PHP
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
PHP页面静态化――纯静态与伪静态用法详解
2020/06/05 PHP
什么是JavaScript
2009/08/13 Javascript
JQuery上传插件Uploadify使用详解及错误处理
2010/04/27 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
jQuery中的deferred使用方法
2017/03/27 jQuery
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
如何选择适合你的JavaScript框架
2017/11/20 Javascript
elementui的默认样式修改方法
2018/02/23 Javascript
详解Nodejs mongoose
2018/06/10 NodeJs
浅谈vue同一页面中拥有两个表单时,的验证问题
2018/09/18 Javascript
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
vue路由教程之静态路由
2019/09/03 Javascript
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
python生成大写32位uuid代码
2020/03/03 Python
Python astype(np.float)函数使用方法解析
2020/06/08 Python
Python用来做Web开发的优势有哪些
2020/08/05 Python
美体小铺英国官网:The Body Shop英国
2017/01/24 全球购物
俄罗斯三星品牌商店:Samsungstore
2020/04/05 全球购物
名词解释型面试题(主要是网络)
2013/12/27 面试题
简单的辞职信范文
2014/01/18 职场文书
金融系应届毕业生求职信
2014/05/26 职场文书
就业协议书范本
2014/10/08 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
借条格式范本
2015/05/25 职场文书
立案决定书范文
2015/06/24 职场文书
如何在pycharm中快捷安装pip命令(如pygame)
2021/05/31 Python
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android
Python开发五子棋小游戏
2022/05/02 Python