javascript - JS : convert a matrix of bytes into image

Question

我正在 JS 代码中从相机获取一个 2D 字节矩阵(0-255 之间的整数值)，我想将其显示在 <canvas> 中元素。有没有办法将该矩阵转换为图像？

我尝试使用window.atob()但它失败并停止执行代码。

Answer 1

是的，这是可能的。您需要这样做(例如 120x120 图像):

HTML:

<canvas id="canvas" width=120 height=120></canvas>

JS:

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext("2d");
var imgData = ctx.createImageData(120, 120);
// Now you need to assign values to imgData array into groups of four (R-G-B-A)
let j = 0;
iterate your object {
    imgData.data[j] = R value;
    imgData.data[j + 1] = G value;
    imgData.data[j + 2] = B value;
    imgData.data[j + 3] = 255 (if greyscale);
    j += 4;
}
ctx.putImageData(imgData, 0, 0);