HTML5如何實(shí)現(xiàn)微信拍攝上傳照片的功能

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)HTML5如何實(shí)現(xiàn)微信拍攝上傳照片的功能，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),準(zhǔn)格爾企業(yè)網(wǎng)站建設(shè),準(zhǔn)格爾品牌網(wǎng)站建設(shè),網(wǎng)站定制,準(zhǔn)格爾網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,準(zhǔn)格爾網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

做了個(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è)牛人寫(xiě)的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失敗，畫(huà)面扭曲。

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

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

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

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

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

上述就是小編為大家分享的HTML5如何實(shí)現(xiàn)微信拍攝上傳照片的功能了，如果剛好有類(lèi)似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站標(biāo)題：HTML5如何實(shí)現(xiàn)微信拍攝上傳照片的功能
網(wǎng)頁(yè)路徑：http://m.jiaotiyi.com/article/pchsgg.html

網(wǎng)站建設(shè)知識(shí)

HTML5如何實(shí)現(xiàn)微信拍攝上傳照片的功能

其他資訊