国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

ShevaKuilin / 829人閱讀

摘要：圖片數據繪制到先構造對象，為，圖片之后繪制到的圖片文件數據繪制到還是先轉換成一個，然后構造對象，為，圖片之后繪制到利用上面的函數，由對象得到格式的，再參考圖片數據繪制到轉換為對象并使用發送轉換為對象后，可以使用上傳圖像文件。

實現功能和適用業務

采集本地攝像頭獲取攝像頭畫面，拍照保存，上傳服務器；

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

實現步驟

調取本地攝像頭（getUserMedia）/上傳圖片，將圖片/視頻顯示在瀏覽器上

拍照/轉換 將視頻拍照或是將圖片展示在canvas中

將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格式

可以通過 Canvas.toDataUrl 轉換成 DataUrl（base64） 再轉成 blob

可以直接轉成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...

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51642.html

相關文章

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

    摘要：圖片數據繪制到先構造對象，為，圖片之后繪制到的圖片文件數據繪制到還是先轉換成一個，然后構造對象，為，圖片之后繪制到利用上面的函數，由對象得到格式的，再參考圖片數據繪制到轉換為對象并使用發送轉換為對象后，可以使用上傳圖像文件。 實現功能和適用業務 采集本地攝像頭獲取攝像頭畫面，拍照保存，上傳服務器； 前端上傳圖片處理，展示，縮小，裁剪，上傳服務器 實現步驟 調取本地攝像頭（get...

    worldligang 評論0 收藏0

  • 瀏覽器調用攝像頭，拍照上傳到dropbox

    摘要：主要部分如下瀏覽器調用攝像頭拍照瀏覽器調用攝像頭需要全新的對象，，通過此接口，可以調用攝像頭和麥克風，調用時需要用戶授權方可開啟。該方法參數為，返回值為一個標準對象。 標題為最近遇到的一個實際要求，題目很簡單，做起來挺費心費力。因為兼容性及潛在問題，目前單純做到desktop chrome only。參考資料多見于 http://www.html5rocks.com/zh/tutori...

    learning 評論0 收藏0

  • getUserMedia API及HTML5 調用手機攝像頭拍照

    摘要：失敗回調函數的參數，可能的異常有硬件問題用戶拒絕了當前的瀏覽器實例的訪問請求或者用戶拒絕了當前會話的訪問或者用戶在全局范圍內拒絕了所有媒體訪問請求。 getUserMedia API簡介 HTML5的getUserMedia API為用戶提供訪問硬件設備媒體（攝像頭、視頻、音頻、地理位置等）的接口，基于該接口，開發者可以在不依賴任何瀏覽器插件的條件下訪問硬件媒體設備。 getUserM...

    xiaokai 評論0 收藏0

  • getUserMedia API及HTML5 調用手機攝像頭拍照

    摘要：失敗回調函數的參數，可能的異常有硬件問題用戶拒絕了當前的瀏覽器實例的訪問請求或者用戶拒絕了當前會話的訪問或者用戶在全局范圍內拒絕了所有媒體訪問請求。 getUserMedia API簡介 HTML5的getUserMedia API為用戶提供訪問硬件設備媒體（攝像頭、視頻、音頻、地理位置等）的接口，基于該接口，開發者可以在不依賴任何瀏覽器插件的條件下訪問硬件媒體設備。 getUserM...

    李增田 評論0 收藏0

發表評論

0條評論

ShevaKuilin

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<