HTML5調(diào)用本地?cái)z像頭畫面，拍照，上傳服務(wù)器

worldligang 發(fā)布于2019-08-21 18:25 / 1966人閱讀

摘要：圖片數(shù)據(jù)繪制到先構(gòu)造對(duì)象，為，圖片之后繪制到的圖片文件數(shù)據(jù)繪制到還是先轉(zhuǎn)換成一個(gè)，然后構(gòu)造對(duì)象，為，圖片之后繪制到利用上面的函數(shù)，由對(duì)象得到格式的，再參考圖片數(shù)據(jù)繪制到轉(zhuǎn)換為對(duì)象并使用發(fā)送轉(zhuǎn)換為對(duì)象后，可以使用上傳圖像文件。

實(shí)現(xiàn)功能和適用業(yè)務(wù)

采集本地?cái)z像頭獲取攝像頭畫面，拍照保存，上傳服務(wù)器；

前端上傳圖片處理，展示，縮小，裁剪，上傳服務(wù)器

實(shí)現(xiàn)步驟

調(diào)取本地?cái)z像頭（getUserMedia）/上傳圖片，將圖片/視頻顯示在瀏覽器上

拍照/轉(zhuǎn)換將視頻拍照或是將圖片展示在canvas中

將canvas中的圖像，轉(zhuǎn)換成圖片格式（png,jpg等）上傳到服務(wù)器

上述兩種方式涉及到的格式轉(zhuǎn)換分別為：
獲取攝像頭：攝像頭視頻流（blob）-> canvas 圖像 -> blob 圖片上傳服務(wù)器
圖片上傳：上傳的圖片（file） -> base64圖片 -> canvas 圖像 -> blob 圖片上傳服務(wù)器
具體獲取攝像頭的方法可以參考：https://segmentfault.com/a/11...

相關(guān)的格式轉(zhuǎn)換下： canvas轉(zhuǎn)換為dataURL (從canvas獲取dataURL)

var dataurl = canvas.toDataURL("image/png");
var dataurl2 = canvas.toDataURL("image/jpeg", 0.8);

File對(duì)象轉(zhuǎn)換為dataURL、Blob對(duì)象轉(zhuǎn)換為dataURL

File對(duì)象也是一個(gè)Blob對(duì)象，二者的處理相同。

function readBlobAsDataURL(blob, callback) {
    var a = new FileReader();
    a.onload = function(e) {callback(e.target.result);};
    a.readAsDataURL(blob);
}
//example:
readBlobAsDataURL(blob, function (dataurl){
    console.log(dataurl);
});
readBlobAsDataURL(file, function (dataurl){
    console.log(dataurl);
});

dataURL圖片數(shù)據(jù)繪制到canvas

先構(gòu)造Image對(duì)象，src為dataURL，圖片onload之后繪制到canvas

var img = new Image();
img.onload = function(){
    canvas.drawImage(img);
};
img.src = dataurl;

File,Blob的圖片文件數(shù)據(jù)繪制到canvas

還是先轉(zhuǎn)換成一個(gè)url，然后構(gòu)造Image對(duì)象，src為dataURL，圖片onload之后繪制到canvas

利用上面的 readBlobAsDataURL 函數(shù)，由File,Blob對(duì)象得到dataURL格式的url，再參考 dataURL圖片數(shù)據(jù)繪制到canvas

readBlobAsDataURL(file, function (dataurl){
    var img = new Image();
    img.onload = function(){
        canvas.drawImage(img);
    };
    img.src = dataurl;
});

Canvas轉(zhuǎn)換為Blob對(duì)象并使用Ajax發(fā)送

轉(zhuǎn)換為Blob對(duì)象后，可以使用Ajax上傳圖像文件。

先從canvas獲取dataurl, 再將dataurl轉(zhuǎn)換為Blob對(duì)象

var dataurl = canvas.toDataURL("image/png");
var blob = dataURLtoBlob(dataurl);
//使用ajax發(fā)送
var fd = new FormData();
fd.append("image", blob, "image.png");
var xhr = new XMLHttpRequest();
xhr.open("POST", "/server", true);
xhr.send(fd);

Canvas 轉(zhuǎn)換成 Blob格式

可以通過(guò) Canvas.toDataUrl 轉(zhuǎn)換成 DataUrl（base64）再轉(zhuǎn)成 blob

可以直接轉(zhuǎn)成blob,可以通過(guò)canvas.toBlob轉(zhuǎn)換。然toBlob方法的瀏覽器兼容性不是很好，存在兼容性問(wèn)題，幸運(yùn)的是已有前人封裝好了toblob方法，直接拿來(lái)用就好了，適用于pc端和移動(dòng)端
地址：https://github.com/qiyubu/Jav...

具體過(guò)程和相關(guān)參考資料：
http://www.zhangxinxu.com/wor...
http://blog.csdn.net/cuixipin...
https://segmentfault.com/a/11...