摘要:主要部分如下瀏覽器調(diào)用攝像頭拍照瀏覽器調(diào)用攝像頭需要全新的對象,,通過此接口,可以調(diào)用攝像頭和麥克風(fēng),調(diào)用時(shí)需要用戶授權(quán)方可開啟。該方法參數(shù)為,返回值為一個(gè)標(biāo)準(zhǔn)對象。
標(biāo)題為最近遇到的一個(gè)實(shí)際要求,題目很簡單,做起來挺費(fèi)心費(fèi)力。因?yàn)榧嫒菪约皾撛趩栴},目前單純做到desktop chrome only。參考資料多見于 http://www.html5rocks.com/zh/tutorials/,可自行搜索相關(guān)內(nèi)容。
若排版亂掉,查閱https://www.zybuluo.com/bornkiller/note/7064即可。
HTML主要部分如下</>復(fù)制代碼
瀏覽器調(diào)用攝像頭拍照
瀏覽器調(diào)用攝像頭需要全新的BOM對象,navigat.webkitGetUserMedia,通過此接口,可以調(diào)用攝像頭和麥克風(fēng),調(diào)用時(shí)需要用戶授權(quán)方可開啟。
攝像頭畫面實(shí)時(shí)顯示
</>復(fù)制代碼
var video = document.querySelector("#source");
var sourceConfig = { "video" : true };
if(navigator.webkitGetUserMedia) {
navigator.webkitGetUserMedia(sourceConfig, function(stream) {
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, defaultErrHandle);
}
調(diào)用很簡單,將攝像頭捕獲的二進(jìn)制流轉(zhuǎn)換為DomString,再用video節(jié)點(diǎn)引用即可,具體接口可自行查詢。
截圖
</>復(fù)制代碼
var canvas = document.querySelector("#snapshot");
var context = canvas.getContext("2d");
var snapTrigger = document.querySelector("#snapTrigger");
snapTrigger.addEventListener("click",function(e){
context.drawImage(video, 0, 0 ,600,480);
})
用canvas畫布繪制當(dāng)前幀的像素信息。
二進(jìn)制文件轉(zhuǎn)換前兩步順分順?biāo)竭@一步的時(shí)候出現(xiàn)第一次近乎絕望的心情,當(dāng)JAVASCRIPT一腳踩入二進(jìn)制的世界,F(xiàn)E的世界觀被震撼到。
Canvas ----> Blob
Canvas有一個(gè)保存當(dāng)前畫布的方法
canvas.toDataURL("image/jpeg"),返回值是一個(gè)data-url shema,通用格式為data:mimeType,base64,encodeString,但實(shí)際需要的是二進(jìn)制對象,所以需要轉(zhuǎn)換,從data-url到blob對象,我最終也沒有搞明白Base64 及相關(guān)的編碼/解碼問題,只是得到了轉(zhuǎn)換的函數(shù)。函數(shù)內(nèi)部涉及到兩個(gè)很少用到的對象和一個(gè)全局方法,uInt8Array,Blob和window.atob()方法,有興趣的自行g(shù)oogle。。
</>復(fù)制代碼
function canvasToBlob(dataURL){
var BASE64_MARKER = ";base64,";
var parts = dataURL.split(BASE64_MARKER);
var contentType = parts[0].split(":")[1];
var raw = window.atob(parts[1]);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);
for (var i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], {type: "imgag/jpeg"});
}
該方法參數(shù)為data-url shema,返回值為一個(gè)標(biāo)準(zhǔn) blob 對象。
方法參考了Github.com上封裝html5 Filesystem接口開源項(xiàng)目,地址:https://github.com/ebidel/filer.js。
拍照獲取二進(jìn)制對象之后,就需要上傳到dropbox,感覺上并不難,dropbox支持HTTP調(diào)用,但自己嘗試以失敗告終,只能通過官方推薦SDK來實(shí)現(xiàn),該SDK功能很強(qiáng)大,但我用到的功能有限。
dropbox.js 地址:https://github.com/dropbox/dropbox-js。
獲取授權(quán)。
</>復(fù)制代碼
var client = new Dropbox.Client({ key: "2oj96m9cxc6psdf" });
client.authenticate(function(error, client) {
if (error) {
defaultErrHandle(error);
}
});
上傳圖片
</>復(fù)制代碼
function uploadFile(){
var tmp = canvasToBlob(canvas.toDataURL("image/jpeg"));
if(client.isAuthenticated()){
client.writeFile("profile.jpg", tmp , function(error, stat) {
if (error) {
defaultErrHandle(error); // Something went wrong.
}
});
}
}
通過SDK,可以很便捷的上傳任何內(nèi)容,client.writeFile()方法支持string,File,Blob,ArrayBuffer.
個(gè)人原生代碼嘗試
dropbox的授權(quán)有implict grant方式,所以一個(gè)重定向基本上就可以拿到access_token,談?wù)勎募蟼鞑糠郑a如下:
</>復(fù)制代碼
function uploadFile(){
var tmp = canvasToBlob(canvas.toDataURL("image/jpeg"));
var xhr = new XMLHttpRequest();
var data = new FormData();
data.append("profile",tmp,"profile");
xhr.open("POST",
"https://api-content.dropbox.com/1/files/dropbox/",
true);
xhr.setRequestHeader("Authorization","Bearer " + window.localStorage.getItem("access_token"));
xhr.send(data);
}
理論上沒有問題,但實(shí)際上一直在給我返回400 Bad request,多方查閱無法解決,遂只能放棄。
編碼有感最后編碼以失敗告終,心情比較沉悶,努力有時(shí)候并不能得到回報(bào)。
全新的HTML5跟現(xiàn)代瀏覽器的支持,已經(jīng)能做到幾年前FE根本不敢想象的事情,FileSystem,FileReader,Websocket,Worker,UserMedia,localstorage,Canvas,WebGL,XHR Level2,但是這么多特性實(shí)際應(yīng)用的并不是很多,應(yīng)用場景確實(shí)是個(gè)產(chǎn)品經(jīng)理角度出發(fā)的考量,瀏覽器標(biāo)準(zhǔn)支持的滯后性也需要付出更多的學(xué)習(xí)成本和部署成本。
前端框架層出不窮,正在使用的 Angularjs 個(gè)人給32個(gè)贊,歷久彌堅(jiān)的backbone 用戶基數(shù)不小,新晉的Ember.js等一眾正在吸引眾人目光。我只用過Angularjs,個(gè)人感覺這是個(gè)快速崛起的框架,難度是我唯一想吐槽的點(diǎn),編碼習(xí)慣的轉(zhuǎn)換速度決定了學(xué)習(xí)使用這個(gè)框架的難度,越早放棄直接操作DOM的編碼方式,越快能接受這個(gè)框架。如果用了Angularjs,意味著后臺是個(gè)純粹的Restful API,在已經(jīng)選用了這套框架之后,我是堅(jiān)決反對再引入后臺模板引擎,比如說Jade。
后端Nodejs強(qiáng)勢回歸,前后端語言統(tǒng)一意味著前端工程師需要承擔(dān)更多的開發(fā)職責(zé)。前端工程師可能做做頁面,處理交互,后臺工程師用模板引擎規(guī)則重寫,然后服務(wù)器端渲染輸出最終頁。而現(xiàn)在的職責(zé)可能需要劃到數(shù)據(jù)庫查詢這一層。
對前端工程師來說,最壞的時(shí)代,也是最好的時(shí)代。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/78048.html
摘要:圖片數(shù)據(jù)繪制到先構(gòu)造對象,為,圖片之后繪制到的圖片文件數(shù)據(jù)繪制到還是先轉(zhuǎn)換成一個(gè),然后構(gòu)造對象,為,圖片之后繪制到利用上面的函數(shù),由對象得到格式的,再參考圖片數(shù)據(jù)繪制到轉(zhuǎn)換為對象并使用發(fā)送轉(zhuǎn)換為對象后,可以使用上傳圖像文件。 實(shí)現(xiàn)功能和適用業(yè)務(wù) 采集本地?cái)z像頭獲取攝像頭畫面,拍照保存,上傳服務(wù)器; 前端上傳圖片處理,展示,縮小,裁剪,上傳服務(wù)器 實(shí)現(xiàn)步驟 調(diào)取本地?cái)z像頭(get...
摘要:圖片數(shù)據(jù)繪制到先構(gòu)造對象,為,圖片之后繪制到的圖片文件數(shù)據(jù)繪制到還是先轉(zhuǎn)換成一個(gè),然后構(gòu)造對象,為,圖片之后繪制到利用上面的函數(shù),由對象得到格式的,再參考圖片數(shù)據(jù)繪制到轉(zhuǎn)換為對象并使用發(fā)送轉(zhuǎn)換為對象后,可以使用上傳圖像文件。 實(shí)現(xiàn)功能和適用業(yè)務(wù) 采集本地?cái)z像頭獲取攝像頭畫面,拍照保存,上傳服務(wù)器; 前端上傳圖片處理,展示,縮小,裁剪,上傳服務(wù)器 實(shí)現(xiàn)步驟 調(diào)取本地?cái)z像頭(get...
閱讀 2328·2021-09-29 09:42
閱讀 563·2021-09-06 15:02
閱讀 2614·2021-09-02 15:40
閱讀 2120·2019-08-30 14:23
閱讀 1864·2019-08-30 13:48
閱讀 1295·2019-08-26 12:01
閱讀 965·2019-08-26 11:53
閱讀 2150·2019-08-23 18:31