做了個微信的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變形。失?。?/p>

總結：系統級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上建立了插件，有需要的朋友可以去獲取一下，順便說一下，時間過的真快。

以上就是詳解HTML5實現微信拍攝上傳照片的功能的詳細內容，其它編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。