Support diff colored visualisation

[lifeart]

ref:

https://www.robots.ox.ac.uk/~vgg/software/imcomp/

Sample:

// Assuming img1 and img2 are your two images and they have the same dimensions
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
canvas.width = img1.width;
canvas.height = img1.height;

ctx.drawImage(img1, 0, 0);
let imgData1 = ctx.getImageData(0, 0, canvas.width, canvas.height);

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img2, 0, 0);
let imgData2 = ctx.getImageData(0, 0, canvas.width, canvas.height);

let imgDataResult = ctx.createImageData(canvas.width, canvas.height);

for (let i = 0; i < imgData1.data.length; i += 4) {
  let r1 = imgData1.data[i];
  let g1 = imgData1.data[i + 1];
  let b1 = imgData1.data[i + 2];
  
  let r2 = imgData2.data[i];
  let g2 = imgData2.data[i + 1];
  let b2 = imgData2.data[i + 2];
  
  // calculate the color difference
  let diff = Math.abs(r1 - r2) + Math.abs(g1 - g2) + Math.abs(b1 - b2);
  
  if (diff == 0) {
    // the pixels are the same, set to grayscale
    let grayscale = 0.3 * r1 + 0.59 * g1 + 0.11 * b1;
    imgDataResult.data[i] = grayscale;
    imgDataResult.data[i + 1] = grayscale;
    imgDataResult.data[i + 2] = grayscale;
  } else {
    // the pixels are different, set to blue or red
    imgDataResult.data[i] = r1 > r2 ? 255 : 0; // red channel
    imgDataResult.data[i + 1] = 0; // green channel
    imgDataResult.data[i + 2] = r1 < r2 ? 255 : 0; // blue channel
  }
  imgDataResult.data[i + 3] = 255; // alpha channel
}

ctx.putImageData(imgDataResult, 0, 0);