189 8069 5689
这期内容当中小编将会给大家带来有关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日 ---------------------------------------------
上述就是小编为大家分享的HTML5如何实现微信拍摄上传照片的功能了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。