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