這篇文章主要為大家詳細(xì)介紹了HTML5 Canvas，和jquery技術(shù)，調(diào)用手機拍照功能實現(xiàn)圖片上傳，具有一定的參考價值，感興趣的小伙伴們可以參考一下

因為最近一段時間，一直在弄微信項目，其中涉及到了證件上傳的功能，剛開始的時候一點頭緒都沒有，上網(wǎng)查了很多資料，QQ群里面也問了不少人，很多人說如果是app程序，可以申請系統(tǒng)權(quán)限，然后再去調(diào)用系統(tǒng)底層的東西，但是微信是在瀏覽器里面操作的，我們自定義的頁面也是通過微信內(nèi)置瀏覽器打開的，而且微信瀏覽器在內(nèi)部進行了很多特殊處理，屏蔽了很多東西，所以要在頁面調(diào)用拍照功能或者是打開手機系統(tǒng)的圖庫目錄是不可能的，當(dāng)然，這些都只是大伙兒理論上的猜測而已，而在我查了兩天的資料之后，發(fā)現(xiàn)這個問題原來是可以解決的，而且實現(xiàn)的過程居然也很簡單。只是用到了HTML5的file文件上傳功能，再配合canvas即可。下面附上源代碼：

上傳證件

body {

margin: 20px 20%;

color:#777;

text-align: center;

}

#result{

margin-top: 20px;

}

上傳證件...

---

---

$("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)致是這樣的，首先在前端把圖片進行壓縮，因為手機的不同，可能有的手機拍照給力，像素高，拍出來的圖片的大小就相對大一些，所以這里通過一個插件進行了壓縮，然后轉(zhuǎn)換成為Base64的編碼，再把Base64的編碼使用AJAX來POST到服務(wù)器，然后在Java或者PHP后臺進行Base64解碼，解出來的路徑即為上傳圖片的路徑地址，然后再進行存儲，寫到文件或者數(shù)據(jù)庫里面。

此外，這里需要說明一個問題：很多人都說到了微信內(nèi)置瀏覽器，之前我也一直認(rèn)為微信內(nèi)置瀏覽器就是微信自己開發(fā)的一套瀏覽器，然后對很多東西進行了限制。其實不是這樣的，微信本身并沒有再重新開發(fā)一套瀏覽器，而是調(diào)用的系統(tǒng)自身的瀏覽器，是根據(jù)手機的不同系統(tǒng)而變化的。微信內(nèi)置瀏覽器調(diào)用的是手機系統(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)瀏覽器打開的效果。

上面我的我都測試過了，可以正常運行。下面附上幾張照片：

1、這是在微信里面打開的效果

2、這是在手機UC瀏覽器打開的效果：

3、這個是在系統(tǒng)自帶瀏覽器里面打開的效果(ps:我的手機是魅族MX 3)，但是這個不是打開系統(tǒng)圖庫目錄，而是直接定位到了系統(tǒng)的文件夾根目錄。

下一篇會講到在Java后臺進行圖片上傳操作：

HTML5 Canvas調(diào)用手機拍照功能實現(xiàn)圖片上傳功能(圖文詳解下篇)

總結(jié)

以上是生活随笔為你收集整理的html实现照片添加功能,HTML5 Canvas调用手机拍照功能实现图片上传功能（图文详解上篇）...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。