HTML5呼叫本地攝像頭畫面，拍照，上傳伺服器

採集本地攝像頭獲取攝像頭畫面，拍照儲存，上傳伺服器；

前端上傳處理，展示，縮小，裁剪，上傳伺服器

將canvas中的影象，轉換成格式（png,jpg等）上傳到伺服器

var dataurl = canvas.todataurl('image/png');

var dataurl2 = canvas.todataurl('image/jpeg', 0.8);

function readblobasdataurl(blob, callback) ;

a.readasdataurl(blob);
}//example:
readblobasdataurl(blob, function (dataurl));
readblobasdataurl(file, function (dataurl));

var img = new image();

img.onload = function();
img.src = dataurl;

readblobasdataurl(file, function (dataurl);

img.src = dataurl;
});

先從canvas獲取dataurl, 再將dataurl轉換為blob物件

var dataurl = canvas.todataurl('image/png');

var blob = dataurltoblob(dataurl);
//使用ajax傳送
xhr.send(fd);

具體過程和相關參考資料：

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...