這篇文章主要介紹HTML5如何實(shí)現(xiàn)微信拍攝上傳照片功能，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司是一家專業(yè)提供象州企業(yè)網(wǎng)站建設(shè),專注與成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、HTML5建站、小程序制作等業(yè)務(wù)。10年已為象州眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jì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變形。失??！

以上是“HTML5如何實(shí)現(xiàn)微信拍攝上傳照片功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！