是否有 HTML Canvas 视频上下文缓冲区

Question

HTML 音频上下文有一个可自由访问的源缓冲区，可用于直接写入字节数据以供扬声器播放。

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

是否有我们可以访问并直接访问 write/copy RGB 数据字节的等效 'image buffer source'？

我试过的:

我最终实现了这个逐像素的使用：

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

然后做一个：

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

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

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

Answer 1

是的，html5 canvas 的 image data 允许您直接编辑每个像素的 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>

是否有 HTML Canvas 视频上下文缓冲区

Is there an HTML Canvas Video Context Buffer

html

javascript

video

canvas

image