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提供了對攝像頭的可編程訪問，用戶可以直接用getUserMedia獲得攝像頭提供的視頻流。我們需要做的是添加一個HTML5的Video標(biāo)簽，并將從攝像頭獲得視頻作為這個標(biāo)簽的輸入來源（請注意目前僅Chrome和Opera支持getUserMedia。補(bǔ)充：請使用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í)時捕獲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"); 
        因為真正圖像數(shù)據(jù)是base64編碼逗號之后的部分，所以我們實(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ù)后用后臺語言截取22位以后的字符串。例如PHP里：
$image = base64_decode( str_replace('data:image/jpeg;base64,', '',$data);  
4、  圖片上傳
        在前端可以使用Ajax將上面獲得的圖片數(shù)據(jù)上傳到后臺腳本。例如使用jQuery時：
$.post('upload.php',{ 'data' : data } ); 
        在后臺我們用PHP腳本接收數(shù)據(jù)并存儲為圖片。
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)大呢，一起來動手體驗一下吧！
        在HTML5的驅(qū)動下，Web App與Native App之間是否還有不可逾越的鴻溝？我將會在3月23日百度開發(fā)者大會上現(xiàn)場來解答這個問題，敬請期待。