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

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

 1、  視頻流

        HTML5 The Media Capture API提供了對(duì)攝像頭的可編程訪問(wèn)，用戶可以直接用getUserMedia獲得攝像頭提供的視頻流。我們需要做的是添加一個(gè)HTML5的Video標(biāo)簽，并將從攝像頭獲得視頻作為這個(gè)標(biāo)簽的輸入來(lái)源（請(qǐng)注意目前僅Chrome和Opera支持getUserMedia）。

2、  拍照

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

3、  圖片獲取

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

        因?yàn)檎嬲龍D像數(shù)據(jù)是base64編碼逗號(hào)之后的部分，所以我們實(shí)際服務(wù)器處理的圖像數(shù)據(jù)應(yīng)該是這部分，我們可以用兩種辦法來(lái)獲取。

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

4、  圖片上傳

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

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

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

‍

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