HTML5調用本地攝像頭畫面，拍照，上傳服務器

實現功能和適用業務

1. 採集本地攝像頭獲取攝像頭畫面，拍照保存，上傳服務器；
2. 前端上傳圖片處理，展現，縮小，裁剪，上傳服務器

實現步驟

1. 調取本地攝像頭（getUserMedia）/上傳圖片，將圖片/視頻顯示在瀏覽器上
2. 拍照/轉換 將視頻拍照或是將圖片展現在canvas中
3. 將canvas中的圖像，轉換成圖片格式（png,jpg等）上傳到服務器

上述兩種方式涉及到的格式轉換分別爲：
獲取攝像頭： 攝像頭視頻流（blob）-> canvas 圖像 -> blob 圖片 上傳服務器
圖片上傳： 上傳的圖片（file） -> base64圖片 -> canvas 圖像 -> blob 圖片 上傳服務器
具體獲取攝像頭的方法能夠參考：https://segmentfault.com/a/11...

相關的格式轉換下：

canvas轉換爲dataURL (從canvas獲取dataURL)

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

File對象轉換爲dataURL、Blob對象轉換爲dataURL

File對象也是一個Blob對象，兩者的處理相同。

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圖片數據繪製到canvas

先構造Image對象，src爲dataURL，圖片onload以後繪製到canvas

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

File,Blob的圖片文件數據繪製到canvas

仍是先轉換成一個url，而後構造Image對象，src爲dataURL，圖片onload以後繪製到canvas

利用上面的 readBlobAsDataURL 函數，由File,Blob對象獲得dataURL格式的url，再參考 dataURL圖片數據繪製到canvas

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

Canvas轉換爲Blob對象並使用Ajax發送

轉換爲Blob對象後，能夠使用Ajax上傳圖像文件。

先從canvas獲取dataurl, 再將dataurl轉換爲Blob對象

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

Canvas 轉換成 Blob格式

1. 能夠經過 Canvas.toDataUrl 轉換成 DataUrl（base64） 再轉成 blob
2. 能夠直接轉成blob,能夠經過canvas.toBlob轉換。然toBlob方法的瀏覽器兼容性不是很好，存在兼容性問題，幸運的是已有前人封裝好了toblob方法，直接拿來用就行了，適用於pc端和移動端
   地址：https://github.com/qiyubu/Jav...

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