HTML5已經火了幾個年頭，尤其是出現可互動的功能，比如Canvas通過JS程式碼操作使用者裝置PC或手機上的攝像頭，這將是未來各個互動應用的頻繁的操作技術，這裡見到轉載一下，原文參見 http://www.webhek.com/convert-canvas-image/

移動裝置和桌面電腦上的客戶端API起初並不是同步的。最初總是移動裝置上先擁有某些功能和相應的API，但慢慢的，這些API會出現在桌面電腦上。其中一個應用介面技術就是getUserMedia API，它能讓應用開發者訪問使用者的攝像頭或內建相機。下面就讓我展示一下如何通過瀏覽器來訪問你的攝像頭，並提取截圖圖形。

HTML程式碼
下面的程式碼裡我寫了一部分註釋，請閱讀：

<!--
	理想情況下我們應該先判斷你的裝置上是否
	有攝像頭或相機，但簡單起見，我們在這裡直接
	寫出了HTML標記，而不是用JavaScript先判斷
	然後動態生成這些標記
-->
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>

在寫出上面這些標記前應該判斷使用者的客戶端是否有攝像頭支援，但這裡為了不那麼麻煩，這裡直接寫出了這些HTML標記，需要注意的是我們這裡使用的長寬是640×480。

JavaScript程式碼

因為我們是手工寫出的HTML，所以下面的js程式碼會比你想象的要簡單了很多。

// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
	// Grab elements, create settings, etc.
	var canvas = document.getElementById("canvas"),
		context = canvas.getContext("2d"),
		video = document.getElementById("video"),
		videoObj = { "video": true },
		errBack = function(error) {
			console.log("Video capture error: ", error.code); 
		};

	// Put video listeners into place
	if(navigator.getUserMedia) { // Standard
		navigator.getUserMedia(videoObj, function(stream) {
			video.src = stream;
			video.play();
		}, errBack);
	} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
		navigator.webkitGetUserMedia(videoObj, function(stream){
			video.src = window.webkitURL.createObjectURL(stream);
			video.play();
		}, errBack);
	}
	else if(navigator.mozGetUserMedia) { // Firefox-prefixed
		navigator.mozGetUserMedia(videoObj, function(stream){
			video.src = window.URL.createObjectURL(stream);
			video.play();
		}, errBack);
	}
}, false);
 

一旦判斷出使用者瀏覽器支援getUserMedia ，下面就非常簡單了，只需要將那個video元素的src設定為使用者的攝像頭視訊直播連線。這就是用瀏覽器訪問攝像頭需要做的所有的事情！

拍照的功能只能說是稍微複雜一點點。我們在按鈕上加入一個監聽器，將視訊畫面畫到畫布上。

// 觸發拍照動作
document.getElementById("snap")
       .addEventListener("click", function() {
	context.drawImage(video, 0, 0, 640, 480);
});

當然，你還可以在圖片上加一些濾鏡效果….我還是把這些技術放到以後的文章裡再說吧。但至少你可以將這個畫布影象轉換成一張圖片。

以前我們需要使用第三方的外掛才能從瀏覽器裡訪問使用者的攝像頭，這不免有些複雜。現在只需要HTML5的畫布技術和javaScript，我們就能簡單快速的操作使用者的攝像頭。不僅僅還是訪問攝像頭，而且是因為HTML5的畫布技術及其強大，我們可以給圖片上加入各種迷人的濾鏡效果。現在，在瀏覽器裡用自己的攝像頭給自己拍張照片吧！