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

資訊專欄INFORMATION COLUMN

瀏覽器調(diào)用攝像頭,拍照上傳到dropbox

learning / 2639人閱讀

摘要:主要部分如下瀏覽器調(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ù)制代碼

  1. var video = document.querySelector("#source");
  2. var sourceConfig = { "video" : true };
  3. if(navigator.webkitGetUserMedia) {
  4. navigator.webkitGetUserMedia(sourceConfig, function(stream) {
  5. video.src = window.webkitURL.createObjectURL(stream);
  6. video.play();
  7. }, defaultErrHandle);
  8. }

調(diào)用很簡單,將攝像頭捕獲的二進(jìn)制流轉(zhuǎn)換為DomString,再用video節(jié)點(diǎn)引用即可,具體接口可自行查詢。

截圖

</>復(fù)制代碼

  1. var canvas = document.querySelector("#snapshot");
  2. var context = canvas.getContext("2d");
  3. var snapTrigger = document.querySelector("#snapTrigger");
  4. snapTrigger.addEventListener("click",function(e){
  5. context.drawImage(video, 0, 0 ,600,480);
  6. })

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ù)制代碼

  1. function canvasToBlob(dataURL){
  2. var BASE64_MARKER = ";base64,";
  3. var parts = dataURL.split(BASE64_MARKER);
  4. var contentType = parts[0].split(":")[1];
  5. var raw = window.atob(parts[1]);
  6. var rawLength = raw.length;
  7. var uInt8Array = new Uint8Array(rawLength);
  8. for (var i = 0; i < rawLength; ++i) {
  9. uInt8Array[i] = raw.charCodeAt(i);
  10. }
  11. return new Blob([uInt8Array], {type: "imgag/jpeg"});
  12. }

該方法參數(shù)為data-url shema,返回值為一個(gè)標(biāo)準(zhǔn) blob 對象。
方法參考了Github.com上封裝html5 Filesystem接口開源項(xiàng)目,地址:https://github.com/ebidel/filer.js。

Dropbox用戶授權(quán)

拍照獲取二進(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ù)制代碼

  1. var client = new Dropbox.Client({ key: "2oj96m9cxc6psdf" });
  2. client.authenticate(function(error, client) {
  3. if (error) {
  4. defaultErrHandle(error);
  5. }
  6. });

上傳圖片

</>復(fù)制代碼

  1. function uploadFile(){
  2. var tmp = canvasToBlob(canvas.toDataURL("image/jpeg"));
  3. if(client.isAuthenticated()){
  4. client.writeFile("profile.jpg", tmp , function(error, stat) {
  5. if (error) {
  6. defaultErrHandle(error); // Something went wrong.
  7. }
  8. });
  9. }
  10. }

通過SDK,可以很便捷的上傳任何內(nèi)容,client.writeFile()方法支持string,File,Blob,ArrayBuffer.

個(gè)人原生代碼嘗試
dropbox的授權(quán)有implict grant方式,所以一個(gè)重定向基本上就可以拿到access_token,談?wù)勎募蟼鞑糠郑a如下:

</>復(fù)制代碼

  1. function uploadFile(){
  2. var tmp = canvasToBlob(canvas.toDataURL("image/jpeg"));
  3. var xhr = new XMLHttpRequest();
  4. var data = new FormData();
  5. data.append("profile",tmp,"profile");
  6. xhr.open("POST",
  7. "https://api-content.dropbox.com/1/files/dropbox/",
  8. true);
  9. xhr.setRequestHeader("Authorization","Bearer " + window.localStorage.getItem("access_token"));
  10. xhr.send(data);
  11. }

理論上沒有問題,但實(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

相關(guān)文章

  • HTML5調(diào)用本地像頭畫面,拍照,上傳服務(wù)器

    摘要:圖片數(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...

    ShevaKuilin 評論0 收藏0
  • HTML5調(diào)用本地像頭畫面,拍照上傳服務(wù)器

    摘要:圖片數(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...

    worldligang 評論0 收藏0

發(fā)表評論

0條評論

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