這期內容當中小編將會給大家帶來有關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如何實現微信拍攝上傳照片的功能了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注創新互聯行業資訊頻道。

分享文章：HTML5如何實現微信拍攝上傳照片的功能
分享地址：http://www.yijiale78.com/article16/pchsgg.html

成都網站建設公司_創新互聯，為您提供商城網站、微信公眾號、、做網站、移動網站建設、自適應網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯