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

JS：将字节矩阵转换为图像

1 个答案: