HTML5实现微信拍摄上传照片功能
做了个微信的HTML5拍摄上传照片功能，问题重重...
前端代码
$(':file').on('change',function(){
varfile=this.files[0];
varurl=webkitURL.createObjectURL(file);
/*生成图片
*----------------------*/
var$img=newImage();
$img.onload=function(){
//生成比例
varwidth=$img.width,
height=$img.height,
scale=width/height;
width=parseInt(800);
height=parseInt(width/scale);
//生成canvas
var$canvas=$('#canvas');
varctx=$canvas[0].getContext('2d');
$canvas.attr({width:width,height:height});
ctx.drawImage($img,0,0,width,height);
varbase64=$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版本无法响应上传控件inputtyle=file;
2.iphone5生成canvas失败，画面扭曲。
---------------------------------------后续报告22013年10月10日---------------------------------------------
同样有一位牛人写的ios-imagefile-megapixel插件，解决了iphone5+画面扭曲的问题。
目前还剩1个系统级BUG。
微信android版本无法响应上传控件inputtyle=file;
---------------------------------------后续报告32014年5月16日---------------------------------------------
目前所有问题都解决了，在github上建立了插件，有需要的朋友可以去获取一下，顺便说一下，时间过的真快。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。