'Memory leak using opencv.js in web worker?

I transfer the image to a web worker and use opencv to convert the image to grayscale

But my memory keeps leaking and I can't figure out where the problem is?

I have tried using transferable objects

But it will also cause memory leaks

Is opencv.js not available in web workers at all?

sorry my english is bad i use google thranslate

example code

main.js


const worker = new Worker("./worker.js");

var streamVideo = document.getElementById("streamVideo");
var srcCanvas = document.createElement("canvas"); // canvasFrame is the id of <canvas>
var srcCrx = srcCanvas.getContext("2d");

function processStart(){
  const sendImageData = function () {
    srcCrx.drawImage(streamVideo, 0, 0, srcCanvas.width, srcCanvas.height);
    let sendMessage = {
      type: "imageData",
      width: srcCanvas.width,
      height: srcCanvas.height,
      srcImageData: srcCrx.getImageData(0, 0, srcCanvas.width, srcCanvas.height).data,
    };

    // let srcImageData= srcCrx.getImageData(0, 0, srcCanvas.width, srcCanvas.height).data;
    // let sendMessage = {
    //   type: "imageData",
    //   width: srcCanvas.width,
    //   height: srcCanvas.height,
    //   srcImageData,
    // };
    // worker.postMessage(sendMessage,[srcImageData.buffer]);
    // use transferable objects? but will also cause memeory leak

    worker.postMessage(sendMessage);
    sendMessage.srcImageData = null;
    sendMessage.type = null;
    sendMessage.width = null;
    sendMessage.height = null;
    sendMessage = null;
  };
  const handleImageData = function (e) {
    const resDst = new cv.Mat(e.data.height, e.data.width, cv.CV_8UC4);
    resDst.data.set(e.data.resImageData);
    cv.imshow("videoOutput", resDst);
    e.data.resImageData = null;
    e.data.width = null;
    e.data.height = null;
    e.data = null;
    e = null;
    resDst.delete();
  };
  worker.onmessage = function (e) {
    if (e.data.type === "opencvIsReady") {
      // first send image data
      sendImageData();
    }
    if (e.data.type === "imageData") {
      setTimeout(() => {
        sendImageData();
        handleImageData(e);
      }, 10);
    }
  };
  worker.postMessage({ type: "initWorker" });
}

processStart();

web worker

importScripts("./opencv.js");

self.onmessage = function (e) {
  if (e.data.type === "initWorker") {
    cv["onRuntimeInitialized"] = () => {
      self.postMessage({ type: "opencvIsReady" });
    };
  }

  if (e.data.type === "imageData") {
    // handle imagedata from main thread
    let srcImageData = e.data.srcImageData;
    let srcDst = new cv.Mat(e.data.height, e.data.width, cv.CV_8UC4);
    let calcDst = new cv.Mat(e.data.height, e.data.width, cv.CV_8UC1);
    srcDst.data.set(srcImageData);
    cv.cvtColor(srcDst, calcDst, cv.COLOR_RGBA2GRAY);

    // response send gary image
    let resImageData = new Uint8ClampedArray(calcDst.data);
    let sendMessage = {
      type: "imageData",
      resImageData: resImageData,
      width: e.data.width,
      height: e.data.height,
    };
    self.postMessage(sendMessage);
    e.data.imageData = null;
    e.data.type = null;
    e.data.width = null;
    e.data.height = null;
    e.data = null;
    e = null;
    srcImageData = null;
    resImageData = null;
    srcDst.delete();
    calcDst.delete();
  }
};



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source