是否有 HTML Canvas Video Context Buffer

Question

HTML 音頻上下文有一個可自由訪問的源緩沖區，可用於直接寫入要由揚聲器播放的字節數據。

https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/createBufferSource

是否有等效的“圖像緩沖區源”可以訪問並直接寫入/復制 RGB 數據字節？

我試過的：

我最終使用以下方法逐個像素地實現了這個：

context.fillStyle = "rgb(" + source[pointer].toString() + "," + source[pointer+1].toString() + "," + source[pointer+2].toString() + ")"; 

然后做一個：

context.fillRect (x, y, 1, 1); 

將這個像素一個像素地繪制到畫布上，雖然我懷疑這不是最有效的方法，但效果很好。

我仍然願意接受其他建議。

Answer 1

是的，html5 canvas 的圖像數據允許您直接編輯每個像素的 rgb 值。

 var can = document.getElementById('can'); var ctx = can.getContext('2d'); var imgData = ctx.createImageData(100, 100); for(var i = 0; i < 100*100*4; i+=4) { imgData.data[i+0] = 0; // red imgData.data[i+1] = ((i/4)%100)/100*255; // green imgData.data[i+2] = Math.floor((i/4)/100)/100*255; // blue imgData.data[i+3] = 255; // alpha } ctx.putImageData(imgData, 0, 0);

 <canvas width="100" height="100" id="can"></canvas>