最近的一個小項目需要用到移動端調(diào)用手機攝像頭拍照莱预,經(jīng)多方查找驗證毕匀,最后選定用file域調(diào)用手機攝像頭拍照腐碱,轉(zhuǎn)成base64格式上傳到服務器
最后找到了一個非常好用的插件,分享一波剿配。
demo地址:拍照上傳demo
html代碼:
<div id="modalcamera">
<input class="file" accept="image/*" capture="camera" multiple="multiple" type="file" name="" id="file">
</div>
accept="image/*" : 只接收圖片
capture="camera" : 直接調(diào)用攝像頭
插件地址:https://github.com/think2011/localResizeIMG
js代碼:
//unbind:為了解決file域提交失敗后,不清空數(shù)據(jù)的問題
$('#file').unbind().on('change', function () {
lrz(this.files[0], {
width: 640
})
.then(function (rst) {
// 處理成功會執(zhí)行
var output = rst.base64; //獲取base64位圖片信息
// 數(shù)據(jù)流前22位是圖片格式信息阅束,不屬于圖片呼胚,需切除
var base64Data = output.substr(22);
console.log(base64Data)
// 將圖片上傳到服務器
//上傳代碼
})
.catch(function (err) {
// 處理失敗會執(zhí)行
})
.always(function () {
// 不管是成功失敗,都會執(zhí)行
});
})