詳解HTML5實現微信拍攝上傳照片的功能

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

做了個微信的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上建立了插件，有需要的朋友可以去獲取一下，順便說一下，時間過的真快。

以上是詳解HTML5實現微信拍攝上傳照片的功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！