みかづきブログ・カスタム

基本的にはちょちょいのほいです。

OpenCV.jsを使って2枚の画像の差分を表示する 🖼

blog.kimizuka.org

前回の記事がもりもりだったのですが、今回はシンプルにabsdiff関数だけを使ってみます。

docs.opencv.org

cv.absdiff(matA, matB, 出力先のmat);

で、差分が取れるのでものすごく手軽に使えます。

早速、下記2枚(1.png、2.png)の画像の差分を表示してみましょう。


1.png


2.png

ソースコード(抜粋)

const Module = {
  onRuntimeInitialized() {
    const imgs = [];
    const canvasList = [];
    const contextList = [];
    const imgLength = 2;
    let count = 0;

    for (let i = 0; i < imgLength; ++i) {
      const img = new Image();

      img.onload = onLoadImage;
      img.src = `./${ i + 1 }.png`;

      imgs.push(img);
      canvasList.push(document.getElementById(`c${ i + 1 }`));
      contextList.push(canvasList[i].getContext('2d'));
    }

    function onLoadImage() {
      count += 1;

      if (count === imgLength) {
        main();
      }
    }

    function main() {
      const width = 114;
      const height = 114;
      const colorMatList = [];
      const diffMat = new cv.Mat(height, width, cv.CV_8UC4);

      for (let i = 0; i < imgLength; ++i) {
        canvasList[i].width = width;
        canvasList[i].height = height;

        colorMatList.push(new cv.Mat(height, width, cv.CV_8UC4));
        contextList[i].drawImage(imgs[i], 0, 0);
        colorMatList[i].data.set(contextList[i].getImageData(0, 0, width, height).data);
        cv.cvtColor(colorMatList[i], colorMatList[i], cv.COLOR_RGBA2RGB);

        cv.imshow(`c${ i + 1 }`, colorMatList[i]);
      }

      cv.absdiff(colorMatList[0], colorMatList[1], diffMat);
      cv.imshow('diff', diffMat);
    }
  }
};

画像の読み込みやら、Canvasへのレンダリングやらがあるので、長く見えますが、差分を計算し表示しているのは、

cv.absdiff(colorMatList[0], colorMatList[1], diffMat);
cv.imshow('diff', diffMat);

この2行です。

結果

コードは割愛しますが、モノクロに変換してから差分を取る、白黒にしてから差分を取ることもできます。

色々試してみましたが、モノクロにしてから差分を取って、差分画像を白黒に変換するのが使いやすさと綺麗さを兼ね揃えている気がしました。