HTML5實現(xiàn)微信拍攝上傳照片功能
做了個微信的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 );
實測：
電腦端
chrome 版本29，上傳成功，源圖片3M，壓縮后1024 * 比例，約250kb 通過！
移動端
android 版本4+，微信，點擊上傳無反應(yīng)，在手機瀏覽器中打開可上傳，拍攝約3M-，壓縮后1024* 比例，約3M-，根本沒壓縮嘛！?。?失??！
iphone4 & 4s 版本6+ 微信，拍攝約3M-，壓縮后1024 * 比例，約250kb 通過！
iphone5 版本6+ 微信，生成canvas變形。失??！
總結(jié)：系統(tǒng)級BUG，無解.... 這下不知道怎么辦了..
--------------------------------------- 后續(xù)報告 2013年09月12日 ----------------------------------------------
找到個牛人寫的javascript編譯jpg的插件，javascript_jpeg_encoder。
用這個辦法可以解決android無法壓縮圖片的問題。
目前還剩2個系統(tǒng)級BUG。
1. 微信android版本無法響應(yīng)上傳控件 input tyle=file;
2. iphone5 生成canvas失敗，畫面扭曲。
--------------------------------------- 后續(xù)報告2 2013年10月10日 ---------------------------------------------
同樣有一位牛人寫的 ios-imagefile-megapixel 插件，解決了iphone5+畫面扭曲的問題。
目前還剩1個系統(tǒng)級BUG。
微信android版本無法響應(yīng)上傳控件 input tyle=file;
--------------------------------------- 后續(xù)報告3 2014年5月16日 ---------------------------------------------
目前所有問題都解決了，在github上建立了插件，有需要的朋友可以去獲取一下，順便說一下，時間過的真快。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
基于BootStrap Metronic開發(fā)框架經(jīng)驗小結(jié)【四】Bootstrap圖標(biāo)的提取和利用
通過本文主要介紹如何提取Bootstrap的圖標(biāo)信息，存儲到數(shù)據(jù)庫里面為我所用，非常具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
這是一套適用于JavaScript程序的編碼規(guī)范。它基于Sun的Java程序編碼規(guī)范。但進(jìn)行了大幅度的修改, 因為JavaScript不是Java。2010-11-11
柱狀圖主要用于表示離散數(shù)據(jù)的頻數(shù),也是一種基礎(chǔ)可視化圖,這篇文章主要給大家介紹了關(guān)于Echarts Bar橫向柱狀圖的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-08-08
這篇文章主要介紹了javascript入門教程，全部內(nèi)容都是javascript的基礎(chǔ)知識，內(nèi)容很全面，特別適合剛剛學(xué)習(xí)javascript的朋友學(xué)習(xí)，希望大家仔細(xì)閱讀javascript教程。2015-11-11
這篇文章主要介紹了微信小程序--特定區(qū)域滾動到頂部時固定的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
JavaScript函數(shù)防抖與函數(shù)節(jié)流的定義及使用詳解
這篇文章主要為大家詳細(xì)介紹一下JavaScript中函數(shù)防抖與函數(shù)節(jié)流的定義及使用，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)JS有一定幫助，需要的可以參考一下2022-08-08
JavaScript 利用StringBuffer類提升+=拼接字符串效率
JavaScript 利用StringBuffer類提升+=拼接字符串效率，需要的朋友可以參考下。2009-11-11
淺談layui分頁控件field參數(shù)接收對象的問題
今天小編就為大家分享一篇淺談layui分頁控件field參數(shù)接收對象的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了微信小程序在ios下Echarts圖表不能滑動的解決方案,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,下面我們來一起學(xué)習(xí)下吧2019-07-07
這篇文章主要介紹了JS實現(xiàn)繼承的幾種常用方式,結(jié)合實例形式分析了JavaScript繼承的四種常見實現(xiàn)方式,包括原型鏈繼承、構(gòu)造繼承、組合繼承及寄生組合繼承,需要的朋友可以參考下2019-06-06