在 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>