HTML5实现微信拍摄上传照片功能
做了个微信的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上建立了插件,有需要的朋友可以去获取一下,顺便说一下,时间过的真快。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 富有哲理的动物寓言小故事。