html5實現(xiàn)拍照上傳應(yīng)用的功能方法.
HTML5的技術(shù)日益走入我們的生活，它不單單是技術(shù)上的突破，也可以為我們的生活，帶來更為便捷的服務(wù)。隨著WebApp的普及，在HTML5規(guī)范的支持下，WebApp在手機上拍照已經(jīng)成為可能。接下來小編就為大家介紹下在Web App使用中，如何用手機進行拍照，將其顯示在頁面上，并上傳至服務(wù)器。
1、 視頻流
HTML5 The Media Capture API提供了對攝像頭的可編程訪問，用戶可以直接用getUserMedia獲得攝像頭提供的視頻流。我們需要做的是添加一個HTML5的Video標(biāo)簽，并將從攝像頭獲得視頻作為這個標(biāo)簽的輸入來源（請注意目前僅Chrome和Opera支持getUserMedia。補充：請使用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實時捕獲Video標(biāo)簽的內(nèi)容，Video元素能作為Canvas圖像的輸入，這一點很棒。主要代碼如下：
<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編碼逗號之后的部分，所以我們實際服務(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手機應(yīng)用拍照上傳的功能，而且還可以實現(xiàn)把Canvas的輸出轉(zhuǎn)換為圖片上傳的功能。這樣一舉兩得的方法還可以讓我們使用Canvas為用戶提供圖片編輯，例如裁剪、上色、涂鴉的畫板功能，然后把用戶編輯完的圖片保存到服務(wù)器上。
怎么樣，html5的功能是不是很強大呢，一起來動手體驗一下吧！
在HTML5的驅(qū)動下，Web App與Native App之間是否還有不可逾越的鴻溝？我將會在3月23日百度開發(fā)者大會上現(xiàn)場來解答這個問題，敬請期待。
