亚洲精品乱码久久久久蜜桃-97国产精品人妻无码久久久-加勒比中文字幕无码一区-中文字幕乱人伦高清视频-无码va在线观看

         HTML5帶來的豐富互聯(lián)網(wǎng)技術(shù)讓所有人都享受到了技術(shù)發(fā)展和體驗進步的樂趣。HTML5自然也是備受期待和矚目，技術(shù)人員、設(shè)計者、HTML5真的實現(xiàn)了拍照上傳應(yīng)用么？

 1、  視頻流

        HTML5 The Media Capture API提供了對攝像頭的可編程訪問，用戶可以直接用getUserMedia獲得攝像頭提供的視頻流。我們需要做的是添加一個HTML5的Video標簽，并將從攝像頭獲得視頻作為這個標簽的輸入來源（請注意目前僅Chrome和Opera支持getUserMedia）。

2、  拍照

        拍照功能，我們采用HTML5的Canvas實時捕獲Video標簽的內(nèi)容，Video元素能作為Canvas圖像的輸入，這一點很棒。主要代碼如下：

3、  圖片獲取

        下面我們要從Canvas獲取圖片數(shù)據(jù)，其核心思路是用canvas的toDataURL將Canvas的數(shù)據(jù)轉(zhuǎn)換為base64位編碼的PNG圖像，類似于

        因為真正圖像數(shù)據(jù)是base64編碼逗號之后的部分，所以我們實際服務(wù)器處理的圖像數(shù)據(jù)應(yīng)該是這部分，我們可以用兩種辦法來獲取。

        第一種：是在前端截取22位以后的字符串作為圖像數(shù)據(jù)，

4、  圖片上傳

        在前端可以使用Ajax將上面獲得的圖片數(shù)據(jù)上傳到后臺腳本。例如使用jQuery時：

        請注意，以上的解決方案不僅能用于Web App拍照上傳，并且你可以實現(xiàn)把Canvas的輸出轉(zhuǎn)換為圖片上傳的功能。這樣你可以使用Canvas為用戶提供圖片編輯，例如裁剪、上色、涂鴉的畫板功能，然后把用戶編輯完的圖片保存到服務(wù)器上。

        在HTML5的驅(qū)動下，Web App與Native App之間是否還有不可逾越的鴻溝？我將會在3月23日百度開發(fā)者大會上現(xiàn)場來解答這個問題，敬請期待。

‍

杭州網(wǎng)站建設(shè) 更多：‍HTML4與HTML5之間有那些不同點