這篇文章主要介紹“html5拍照功能的實(shí)現(xiàn)方法”，在日常操作中，相信很多人在html5拍照功能的實(shí)現(xiàn)方法問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”html5拍照功能的實(shí)現(xiàn)方法”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

華亭ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！

1、 視頻流

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

代碼如下:

 

視頻流

2、 拍照

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

代碼如下:

JavaScript Code復(fù)制內(nèi)容到剪貼板
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);  

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;//atobdecodesastringofdatawhichhasbeenencodedusingbase-64encoding

第二種：是在后端獲取傳輸?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ǔ)為圖片。

代碼如下:

functionconvert_data($data){  
$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);  
save_to_file($image);  
}  
functionsave_to_file($image){  
$fp=fopen($filename,’w');  
fwrite($fp,$image);  
fclose($fp);  
}

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

到此，關(guān)于“html5拍照功能的實(shí)現(xiàn)方法”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

網(wǎng)站題目：html5拍照功能的實(shí)現(xiàn)方法-創(chuàng)新互聯(lián)
鏈接地址：http://weahome.cn/article/dojggi.html