使用 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();