video & canvas 实现拍照

启用设备的摄像头

// 摄像头开启
var camera_start = function() {
	let isStreaming = false,
	video = document.querySelector('video')
    // 根据实际窗口大小设置摄像窗口大小
	w = document.documentElement.clientWidth / 2
	h = $("div").height() / 2

	navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
	if (navigator.getUserMedia) {
        // 设置配置
		// 获取摄像头调用许可
		navigator.getUserMedia(
			{
				video:true,
				audio:false
			},
			function(stream) {
				let url = window.URL || window.webkitURL;
				video.src = url ? url.createObjectURL(stream) : stream;
				video.play();
			},
			function(error) {
				alert('Something went wrong. (error code ' + error.code + ')');
				return;
			}
		);
	}
	else {
		alert('当前设备不支持此功能');
		return;
	}
}

// 设置画布
var canvas_start = function() {
	var w = document.documentElement.clientWidth / 2
    var h = $("div").height() / 2
	var canvas = document.querySelector('canvas')
	canvas.setAttribute('width', w);
	canvas.setAttribute('height', h);
}

点击拍照

var takeScreenshot = function() {
    var video = document.querySelector('video')
    var state = video.dataset.state
    if (state === 'play') {
        video.pause()
        context.fillRect(0, 0, canvas.width, canvas.height);
        context.drawImage(video, 0, 0, canvas.width, canvas.height);
    }
}

从 cnavas 上获取图片数据

var get_buffer = function() {
    canvas = document.querySelector('canvas')
    var base64 = canvas.toDataURL('png');
    var data = base64.split('base64,')[1]
    var buf = new Buffer(data, 'base64')
    return buf
}

将图片保存到本地

var buffer = get_buffer()
fs.writeFileSync("image.png", buffer)