将画布的图像数据保存在JavaScript中

Question

我正试图将网络摄像头中的图像捕获到画布中，我想将此图像数据存储为像素阵列。请问我该怎么存放？

这就是我如何从网络摄像头绘制图片到上下文：

context = canvas.getcontext('2d');
captureButton.addEventListerner('click', ()=> {
context.drawImage(player, 0, 0, canvas.width. canvas.height);}

播放器在html中定义为<video id='player' controls autoplay></video>

向致以最良好的问候

Answer 1

这是我在库jsia中已经做过的事情，所以我将在这里为您扩展它：

由于安全限制，这在Stack Exchange上不起作用，但您可以在https://mellen.github.io/jsiaExamples/barcodeReader

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var vid = document.getElementById('vid');
function setupVideoCallback(videoElement, callbackCapture, callbackError, timeBetweenFrames)
{
var localMediaStream = null;
navigator.getUserMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia );
var um = navigator.mediaDevices.getUserMedia({video: true}).then(handleVid).catch(vidErr);
		
if(!um)
{
um = navigator.getUserMedia({video: true}, handleVid, vidErr);
}
function handleVid(stream)
{
videoElement.srcObject = stream;
localMediaStream = stream;
}
		
function vidErr(e)
{
callbackError(e)
}
function capture()
{
if(localMediaStream)
{
callbackCapture();
}
}
setInterval(capture, timeBetweenFrames);
}
function drawVideoOnCanvas()
{
	 canvas.width = vid.clientWidth;
	 canvas.height = vid.clientHeight;
	     
	 ctx.drawImage(vid, 0, 0);
}
setupVideoCallback(vid, drawVideoOnCanvas, e => console.log(e), 10);

<canvas id="canvas"></canvas>
<video autoplay style="visibility:hidden" id="vid"></video>