採集本地攝像頭獲取攝像頭畫面,拍照儲存,上傳伺服器;
前端上傳處理,展示,縮小,裁剪,上傳伺服器
將canvas中的影象,轉換成格式(png,jpg等)上傳到伺服器
var dataurl = canvas.todataurl('image/png');
var dataurl2 = canvas.todataurl('image/jpeg', 0.8);
file物件也是乙個blob物件,二者的處理相同。
function readblobasdataurl(blob, callback) ;
a.readasdataurl(blob);
}//example:
readblobasdataurl(blob, function (dataurl));
readblobasdataurl(file, function (dataurl));
先構造image物件,src為dataurl,onload之後繪製到canvas
var img = new image();
img.onload = function();
img.src = dataurl;
還是先轉換成乙個url,然後構造image物件,src為dataurl,onload之後繪製到canvas
readblobasdataurl(file, function (dataurl);
img.src = dataurl;
});
轉換為blob物件後,可以使用ajax上傳影象檔案。
先從canvas獲取dataurl, 再將dataurl轉換為blob物件
var dataurl = canvas.todataurl('image/png');
var blob = dataurltoblob(dataurl);
//使用ajax傳送
xhr.send(fd);
可以通過 canvas.todataurl 轉換成 dataurl(base64) 再轉成 blob
具體過程和相關參考資料:
html5呼叫手機攝像頭
在乙個響應式 專案中需要用到 html5呼叫手機攝像頭,找了很多資料,大都是 js呼叫api 然後怎樣怎樣,做了幾個demo測試發現根本不行,後來恍然大悟,用html5自帶的 input file 純html5,並且不涉及到js 就可以實現。如下 type file accept image cap...
使用html5開啟攝像頭並拍照
openvideo gotstream,nostream 開啟攝像頭 成功開啟攝像頭 function gotstream stream stream.onended nostream vm.video.onloadedmetadata function 開啟攝像頭失敗 function nostr...
pyqt5使用本地攝像頭
usr bin python coding utf 8 import sys import cv2 from pyqt5 import qtcore,qtgui,qtwidgets from pyqt5.qtwidgets import from pyqt5.qtcore import from p...