html5拍照功能實作程式碼(htm5上傳檔)_html5教學技巧

1、 視訊串流

HTML5 The Media Capture API提供了對攝影機的可編程訪問，使用者可以直接用getUserMedia獲得攝影機提供的視訊串流。我們需要做的是添加一個HTML5的Video標籤，並將從相機獲得視訊作為這個標籤的輸入來源（請注意目前僅Chrome和Opera支援getUserMedia）。

複製程式碼

程式碼如下:

<script> <br />varvideo_element=document.getElementById('video'); <br />if(navigator.getUserMedia){//operashoulduseopera.getUserMedianow <br />navigator.get ',success,error); <br />} <br />functionsuccess(stream){ <br />video_element.src=stream; <br />} <br /></script>

}

視訊串流

2、 拍照

拍照功能，我們採用HTML5的Canvas即時捕捉Video標籤的內容，Video元素能作為Canvas影像的輸入，這一點很棒。主要程式碼如下：

 

複製程式碼

程式碼如下:


Java Code Code複製內容複製到>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獲取圖片數據，其核心思路是用canvas的toDataURL將Canvas的數據轉換為base64位元編碼的PNG圖像，類似於「data:image/png;base64,xxxxx」的格式。

複製程式碼

程式碼如下:

var imgDatacanvas. /png”);

因為真正影像資料是base64編碼逗號之後的部分，所以我們實際伺服器處理的影像資料應該是這部分，我們可以用兩種方法來取得。

第一種：是在前端截取22位元以後的字串作為影像數據，例如：

複製程式碼

程式碼如下:

var data=imgData.sub(22) ;

如果要上傳前圖片的大小，可以使用：

 

複製程式碼

程式碼如下:

var length=atob(data). ;//atobdecodesastringofdatawhichhasbeenencodedusingbase-64encoding

第二種：是在後端取得傳送的資料後用後台語言截取22位元以後的字串。例如PHP裡：

複製程式碼

程式碼如下:

$image=64d :image/jpeg;base64,',”,$data);

4、 圖片上傳

在前端可以使用Ajax將上面獲得的圖片資料上傳到後台腳本。例如使用jQuery時：

複製程式碼

程式碼如下:

$.post('upload.php' ,{'data':data});

 在後台我們用PHP腳本接收資料並儲存為圖片。

複製程式碼

程式碼如下:


functioncon_vert_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);

}

請注意，以上的解決方案不僅能用於Web App拍照上傳，而且你可以實現把Canvas的輸出轉換為圖片上傳的功能。這樣你可以使用Canvas提供使用者圖片編輯，例如裁剪、上色、塗鴉的畫板功能，然後把使用者編輯完的圖片儲存到伺服器上。