啦啦啦啦视频资源免费观看,久久国产福利播放,爱情岛亚洲品质永久入口,黑人顶到深处高潮颤抖,看国产美女Av,天堂网在线最新版www中文网,亚洲第一大成网站,在线视频亚洲久热,呦男呦女视频8区,193AV尤物影院在线观看,免费网禁国产you女网站下载,日韩一区二区三区视频,在线观看,大香伊蕉欧美最新视频,亚洲有狼网站狠狼鲁亚洲下载,俄罗斯雏妓的bbb孩交,激情综合婷婷丁香五月蜜桃,2021精品国产片久久免费看

沈陽做網(wǎng)站
、沈陽建站

，必須設(shè)置"/> ，-1為搜索整個(gè)頻道"/>
，網(wǎng)頁設(shè)計(jì)
制作師專欄

html5實(shí)現(xiàn)拍照上傳應(yīng)用的功能方法.

 

html5實(shí)現(xiàn)拍照上傳應(yīng)用的功能方法.
HTML5的技術(shù)日益走入我們的生活

，它不單單是技術(shù)上的突破
，也可以為我們的生活
，帶來更為便捷的服務(wù)
。隨著WebApp的普及，在HTML5規(guī)范的支持下，WebApp在手機(jī)上拍照已經(jīng)成為可能
。接下來小編就為大家介紹下在Web App使用中
，如何用手機(jī)進(jìn)行拍照，將其顯示在頁面上
，并上傳至服務(wù)器
。
1、  視頻流
        HTML5 The Media Capture API提供了對(duì)攝像頭的可編程訪問
，用戶可以直接用getUserMedia獲得攝像頭提供的視頻流
。我們需要做的是添加一個(gè)HTML5的Video標(biāo)簽，并將從攝像頭獲得視頻作為這個(gè)標(biāo)簽的輸入來源（請(qǐng)注意目前僅Chrome和Opera支持getUserMedia
。補(bǔ)充：請(qǐng)使用Opera支持HTML5的新版本
，如果是Chrome，版本需為Chrome 18.0.1008+
，并使用about:flags來開啟WebRTC
，如下所示）。
<video id="video" autoplay=""></video>  
<script>  
var video_element = document.getElementById('video');  
if (navigator.getUserMedia) { // opera should use opera.getUserMedia now, chrome use webkitGetUserMedia  
navigator.getUserMedia('video',success, error);  
}  
function success(stream) {  
video_element.src =stream;  
}  
</script>
2
、  拍照
        拍照功能
，我們采用HTML5的Canvas實(shí)時(shí)捕獲Video標(biāo)簽的內(nèi)容，Video元素能作為Canvas圖像的輸入
，這一點(diǎn)很棒
。主要代碼如下：
<script>  
var canvas =document.createElement('canvas');  
var ctx = canvas.getContext('2d');  
var cw = vw;  
var ch = vh;  
ctx.fillStyle = "#ffffff";  
ctx.fillRect(0, 0, cw, ch);  
ctx.drawImage(video_element, 0, 0, vvw,vvh, 0,0, vw,vh);  
document.body.append(canvas);  
</script>
  

3、  圖片獲取
        下面我們要從Canvas獲取圖片數(shù)據(jù)

，其核心思路是用canvas的toDataURL將Canvas的數(shù)據(jù)轉(zhuǎn)換為base64位編碼的PNG圖像
，類似于“data:image/png;base64,xxxxx”的格式。
var imgData =canvas.toDataURL("image/png"); 
        因?yàn)檎嬲龍D像數(shù)據(jù)是base64編碼逗號(hào)之后的部分
，所以我們實(shí)際服務(wù)器處理的圖像數(shù)據(jù)應(yīng)該是這部分
，我們可以用兩種辦法來獲取。
        第一種：是在前端截取22位以后的字符串作為圖像數(shù)據(jù)
，例如：
var data = imgData.substr(22);  
        如果要在上傳前獲取圖片的大小
，可以使用：
var length = atob(data).length;// atob decodes a string of data which has been encoded using base-64 encoding 
        第二種：是在后端獲取傳輸?shù)臄?shù)據(jù)后用后臺(tái)語言截取22位以后的字符串。例如PHP里：
$image = base64_decode( str_replace('data:image/jpeg;base64,', '',$data);  
4
、  圖片上傳
        在前端可以使用Ajax將上面獲得的圖片數(shù)據(jù)上傳到后臺(tái)腳本
。例如使用jQuery時(shí)：
$.post('upload.php',{ 'data' : data } ); 
        在后臺(tái)我們用PHP腳本接收數(shù)據(jù)并存儲(chǔ)為圖片。
function convert_data($data){  
$image = base64_decode( str_replace('data:image/jpeg;base64,', '',$data);  
save_to_file($image);  
}  
function save_to_file($image){     
$fp = fopen($filename, 'w');  
fwrite($fp, $image);  
fclose($fp);  
}
        當(dāng)然
，上述的解決方案不僅能應(yīng)用于Web App手機(jī)應(yīng)用拍照上傳的功能
，而且還可以實(shí)現(xiàn)把Canvas的輸出轉(zhuǎn)換為圖片上傳的功能。這樣一舉兩得的方法還可以讓我們使用Canvas為用戶提供圖片編輯
，例如裁剪
、上色
、涂鴉的畫板功能，然后把用戶編輯完的圖片保存到服務(wù)器上
。
怎么樣
，html5的功能是不是很強(qiáng)大呢，一起來動(dòng)手體驗(yàn)一下吧
！
        在HTML5的驅(qū)動(dòng)下
，Web App與Native App之間是否還有不可逾越的鴻溝？我將會(huì)在3月23日百度開發(fā)者大會(huì)上現(xiàn)場(chǎng)來解答這個(gè)問題
，敬請(qǐng)期待
。

 

0
選擇一個(gè)心情
網(wǎng)站建設(shè) 網(wǎng)站制作 網(wǎng)頁設(shè)計(jì) 網(wǎng)站建設(shè)公司 沈陽網(wǎng)站建設(shè) 沈陽網(wǎng)頁設(shè)計(jì) 高端網(wǎng)站設(shè)計(jì) 沈陽網(wǎng)站制作公司 高端網(wǎng)站建設(shè) 沈陽網(wǎng)絡(luò)公司 沈陽網(wǎng)站制作
沈陽易勢(shì)科技有限公司 © 2006-2013 , All rights reserved. 遼B2-20150173-8