這篇文章主要介紹了HTML5實(shí)現(xiàn)微信拍攝上傳照片功能，實(shí)現(xiàn)HTML5 Canvas手機(jī)拍攝，本地壓縮上傳圖片時(shí)遇到問(wèn)題的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

做了個(gè)微信的HTML5拍攝上傳照片功能，問(wèn)題重重…

前端代碼

$(':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);       //發(fā)送到服務(wù)端     $.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 );

實(shí)測(cè)：

電腦端

chrome 版本29，上傳成功，源圖片3M，壓縮后1024 * 比例，約250kb 通過(guò)！

移動(dòng)端

android 版本4+，微信，點(diǎn)擊上傳無(wú)反應(yīng)，在手機(jī)瀏覽器中打開(kāi)可上傳，拍攝約3M-，壓縮后1024* 比例，約3M-，根本沒(méi)壓縮嘛！??！ 失敗！

iphone4 & 4s 版本6+ 微信，拍攝約3M-，壓縮后1024 * 比例，約250kb 通過(guò)！

iphone5 版本6+ 微信，生成canvas變形。失敗！

總結(jié)：系統(tǒng)級(jí)BUG，無(wú)解…. 這下不知道怎么辦了..

————————————— 后續(xù)報(bào)告 2013年09月12日 ———————————————-

找到個(gè)牛人寫的javascript編譯jpg的插件，javascript_jpeg_encoder。

用這個(gè)辦法可以解決android無(wú)法壓縮圖片的問(wèn)題。

目前還剩2個(gè)系統(tǒng)級(jí)BUG。

1. 微信android版本無(wú)法響應(yīng)上傳控件 input tyle=file;

2. iphone5 生成canvas失敗，畫面扭曲。

————————————— 后續(xù)報(bào)告2 2013年10月10日 ———————————————

同樣有一位牛人寫的 ios-imagefile-megapixel 插件，解決了iphone5+畫面扭曲的問(wèn)題。

目前還剩1個(gè)系統(tǒng)級(jí)BUG。

微信android版本無(wú)法響應(yīng)上傳控件 input tyle=file;

————————————— 后續(xù)報(bào)告3 2014年5月16日 ———————————————

目前所有問(wèn)題都解決了，在github上建立了插件，有需要的朋友可以去獲取一下，順便說(shuō)一下，時(shí)間過(guò)的真快。