使用 OpenCV 和 Javascript 在 Canvas 上显示像素数组中的图像答案

【问题标题】：Display image from array of pixels on Canvas with OpenCV and Javascript使用 OpenCV 和 Javascript 在 Canvas 上显示像素数组中的图像
【发布时间】：2020-07-22 13:21:02
【问题描述】：

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

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（三个通道），我正在尝试将其转换为画布所需的 4 个通道 (RGBA)，但我没有运气。是不是因为数组的形状？

我该如何解决这个问题？

干杯

【问题讨论】：

标签： javascript html opencv canvas

【解决方案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();

【讨论】：