$("input:file").localResizeIMG({
width: 500,
quality: 0.8,
success: function (result) {
var img = new Image();
img.src = result.base64;
console.log(result.clearBase64);
//$("body").append(img);
$("#result").empty();
$("#result").append(img); //呈現(xiàn)圖像(拍照結(jié)果)
$.ajax({
url: "upLoadImageServlet",
type: "POST",
data:{formFile:result.clearBase64},
dataType: "HTML",
timeout: 1000,
error: function(){
alert("Error loading PHP document");
},
success: function(result){
//alert(result);
//console.log(result);
alert("Uploads success~")
}
});
}
});
上面實現(xiàn)的流程導(dǎo)致是這樣的，首先在前端把圖片進(jìn)行壓縮，因為手機(jī)的不同，可能有的手機(jī)拍照給力，像素高，拍出來的圖片的大小就相對大一些，所以這里通過一個插件進(jìn)行了壓縮，然后轉(zhuǎn)換成為Base64的編碼，再把Base64的編碼使用AJAX來POST到服務(wù)器，然后在Java或者PHP后臺進(jìn)行Base64解碼，解出來的路徑即為上傳圖片的路徑地址，然后再進(jìn)行存儲，寫到文件或者數(shù)據(jù)庫里面。
此外，這里需要說明一個問題：很多人都說到了微信內(nèi)置瀏覽器，之前我也一直認(rèn)為微信內(nèi)置瀏覽器就是微信自己開發(fā)的一套瀏覽器，然后對很多東西進(jìn)行了限制。其實不是這樣的，微信本身并沒有再重新開發(fā)一套瀏覽器，而是調(diào)用的系統(tǒng)自身的瀏覽器，是根據(jù)手機(jī)的不同系統(tǒng)而變化的。微信內(nèi)置瀏覽器調(diào)用的是手機(jī)系統(tǒng)默認(rèn)瀏覽器，ios和Android系統(tǒng)默認(rèn)瀏覽器都是webkit內(nèi)核，只是對HTML5和CSS3的支持程度可能不同。因為瀏覽器只是系統(tǒng)的一部分，因此系統(tǒng)默認(rèn)瀏覽器不會單獨升級，對HTM5、CSS3的支持程度與系統(tǒng)版本有很大關(guān)系。安卓版微信直接調(diào)用系統(tǒng)瀏覽器內(nèi)核, iOS則是調(diào)用safari,大家可以看到下面1和3的效果是一模一樣的，1是微信瀏覽器打開的，3則是魅族MX 3自帶的系統(tǒng)瀏覽器打開的效果。
上面我的我都測試過了，可以正常運(yùn)行。下面附上幾張照片：
1、這是在微信里面打開的效果
2、這是在手機(jī)UC瀏覽器打開的效果：
3、這個是在系統(tǒng)自帶瀏覽器里面打開的效果（ps:我的手機(jī)是魅族MX 3），但是這個不是打開系統(tǒng)圖庫目錄，而是直接定位到了系統(tǒng)的文件夾根目錄。
上述內(nèi)容就是怎么在HTML5中利用Canvas調(diào)用手機(jī)拍照功能，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
標(biāo)題名稱：怎么在HTML5中利用Canvas調(diào)用手機(jī)拍照功能
分享URL：http://weahome.cn/article/jeoshp.html
重慶分公司
重慶分公司
