HTML canvas 图片来自 rgb 值

Question

我有三个 12x12 arrays，每个都有 R、G 和 B 值。 我 go 如何使用 HTML Canvas 输出图像 (12x12)？ 我遇到过 Canvas 演示，显示绘图线和诸如此类的东西，但没有什么比提供一些 RGB arrays 来产生一些东西更好的了。

非常感谢任何指导。

Answer 1

您可以使用fillRect方法，如下所述： http : //www.w3schools.com/tags/canvas_fillrect.asp

每个矩形将匹配一个表单元格。 您必须决定每个矩形的大小：高和宽一个像素，或者更多。 假设我们将此值pixelSize 。

创建画布，获取上下文，定义maxRows和maxColumns（此处均为12）。 然后，您将使用两个嵌套循环进行迭代：

for(row=0; row<maxRows; ++row) {
    for(column=0; row<maxColumns; ++column) {
        ctx.fillStyle = 'rgb(' + rTable[row][column] + ',' + gTable[row][column] + 
                           ',' + bTable[row][column] + ')';
        ctx.fillRect(column*pixelSize,
                 row*pixelSize,
                 pixelSize,
                 pixelSize);            
    }
}

然后绘制上下文...

（编辑：根据markE的说明将rect更改为fillRect）

Answer 2

下面的 function，如果 RGBA 数据的形式为[[123,32,40,255], [3,233,42,120], ...] ，将返回带有该数据的 canvas：

function createCanvasFromRGBAData(data, width, height) {
  // `data` should look something like [[123,32,40,255], [3,233,42,120], ...]
  if(width*height !== data.length) throw new Error("width*height should equal data.length");
  let canvas = document.createElement("canvas");
  canvas.width = width;
  canvas.height = height;
  let ctx = canvas.getContext("2d");
  let imgData = ctx.createImageData(width, height);
  for(let i = 0; i < data.length; i++) {
    imgData.data[i*4+0] = data[i][0];
    imgData.data[i*4+1] = data[i][1];
    imgData.data[i*4+2] = data[i][2];
    imgData.data[i*4+3] = data[i][3];
  }
  ctx.putImageData(imgData, 0, 0);
  return canvas;
}

但是，在您的情况下，红色、绿色和蓝色各有一个 12x12 阵列。 换句话说，你的数据是“形状” [C,W,H] ，所以你需要先转换你的数据。 我会做一个 3x3 的例子，而不是 12x12，这样输入起来更容易：

// an array of three 3x3 arrays:
let colorChannels = [
  [[0,0,0],[0,0,0],[0,0,0]], // red
  [[0,0,0],[0,0,0],[0,0,0]], // green
  [[0,0,0],[0,0,0],[0,0,0]], // blue
];

let RGBA = [];
for(let x = 0; x < 3; x++) {
  for(let y = 0; y < 3; y++) {
    RGBA.push(colorChannels[0][x][y]); // red
    RGBA.push(colorChannels[1][x][y]); // green
    RGBA.push(colorChannels[2][x][y]); // blue
    RGBA.push(255); // alpha (transparency)
  }
}

let canvas = createCanvasFromRGBAData(RGBA, 3, 3);