使用 OpenCV 和 Javascript 在 Canvas 上的像素阵列显示图像

Question

我从 MQTT 订阅接收像素值数组 ( var image ) 中的一些图像，我想在读取这些图像时在 canvas 的 html 网站上绘制这些图像。 我正在使用 Javascript 来获取图像，并使用 OpenCV.js 来读取图像中的像素值数组并将其绘制在 canvas 上，但我只得到一个黑色方块。 代码如下：

function onMessageArrived(message) {
    var data = JSON.parse(message.payloadString);
    var image = data.image; //300x400x3
    var metadata = data.metadata;
    document.getElementById("metadata").innerHTML += '<span>Metadata: ' + metadata + '</span><br/>';

    var width = image.length;
    var height = image[0].length;
    var c = document.getElementById("images_canvas");

    let mat = cv.matFromArray(width, height, cv.CV_8UC3, image);
    cv.cvtColor(mat, mat, cv.COLOR_BGR2BGRA);
    //let dsize = new cv.Size(400, 400);
    //cv.resize(mat, mat, dsize, 0, 0, cv.INTER_AREA);
    cv.imshow("images_canvas", mat);
    mat.delete();

如您所见，阵列的形状为 300x400x3（三个通道），我正在尝试将其转换为 canvas 所需的 4 个通道（RGBA），但我没有运气。 是因为数组的形状吗？

我该如何解决这个问题？

干杯

Answer 1

你的图像中的阅读情况如何？ 那可能是你的问题。 是 JSON 中的 Base64 吗？

let src = cv.imread('canvasInput');
let dst = new cv.Mat();
cv.cvtColor(src, dst, cv.COLOR_BGR2RGBA, 0);
cv.imshow('canvasOutput', dst);
src.delete(); dst.delete();