是否有 HTML Canvas Video Context Buffer

如何解决是否有 HTML Canvas Video Context Buffer

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); 

将这个像素一个像素地绘制到画布上，虽然我怀疑这不是最有效的方法，但效果很好。

我仍然愿意接受其他建议。

解决方法

是的，html5 canvas 的 image data 允许您直接编辑每个像素的 rgb 值。

bat """
    set OutputFolderName=%date:~12,2%%date:~4,2%%date:~7,2%_%time:~0,2%%time:~3,2%%time:~6,2%
    mkdir %OutputFolderName%
"""

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);