站長資訊網(wǎng)這篇文章主要介紹了HTML5實(shí)現(xiàn)微信拍攝上傳照片功能，實(shí)現(xiàn)HTML5 Canvas手機(jī)拍攝，本地壓縮上傳圖片時遇到問題的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
做了個微信的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); //發(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í)測：
電腦端
chrome 版本29，上傳成功，源圖片3M，壓縮后1024 * 比例，約250kb 通過！
移動端
android 版本4+，微信，點(diǎn)擊上傳無反應(yīng)，在手機(jī)瀏覽器中打開可上傳，拍攝約3M-，壓縮后1024* 比例，約3M-，根本沒壓縮嘛！??！ 失?。?/strong>
iphone4 & 4s 版本6+ 微信，拍攝約3M-，壓縮后1024 * 比例，約250kb 通過！
iphone5 版本6+ 微信，生成canvas變形。失??！
總結(jié)：系統(tǒng)級BUG，無解…. 這下不知道怎么辦了..
————————————— 后續(xù)報(bào)告 2013年09月12日 ———————————————-
找到個牛人寫的javascript編譯jpg的插件，javascript_jpeg_encoder。
用這個辦法可以解決android無法壓縮圖片的問題。
目前還剩2個系統(tǒng)級BUG。
1. 微信android版本無法響應(yīng)上傳控件 input tyle=file;
2. iphone5 生成canvas失敗，畫面扭曲。
————————————— 后續(xù)報(bào)告2 2013年10月10日 ———————————————
同樣有一位牛人寫的 ios-imagefile-megapixel 插件，解決了iphone5+畫面扭曲的問題。
目前還剩1個系統(tǒng)級BUG。
微信android版本無法響應(yīng)上傳控件 input tyle=file;
————————————— 后續(xù)報(bào)告3 2014年5月16日 ———————————————
目前所有問題都解決了，在github上建立了插件，有需要的朋友可以去獲取一下，順便說一下，時間過的真快。
