JSFiddle - React, Tailwind, and code Playground

by Vloxxity

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Comparison</title>
  <style>
    canvas {
      border: 1px solid #000;
      margin-top: 10px;
    }
  </style>
</head>
<body>

<input type="file" id="image1Input" accept="image/*">
<input type="file" id="image2Input" accept="image/*">
<button onclick="compareImages()">Compare Images</button>
<canvas id="resultCanvas"></canvas>

<script>
function compareImages() {
  const image1Input = document.getElementById('image1Input');
  const image2Input = document.getElementById('image2Input');

  const canvas1 = document.createElement('canvas');
  const canvas2 = document.createElement('canvas');
  const resultCanvas = document.getElementById('resultCanvas');
  const resultCtx = resultCanvas.getContext('2d');

  const ctx1 = canvas1.getContext('2d');
  const ctx2 = canvas2.getContext('2d');

  const img1 = new Image();
  const img2 = new Image();

  img1.onload = function() {
    canvas1.width = img1.width;
    canvas1.height = img1.height;
    ctx1.drawImage(img1, 0, 0);

    img2.onload = function() {
      canvas2.width = img2.width;
      canvas2.height = img2.height;
      ctx2.drawImage(img2, 0, 0);

      const imageData1 = ctx1.getImageData(0, 0, canvas1.width, canvas1.height).data;
      const imageData2 = ctx2.getImageData(0, 0, canvas2.width, canvas2.height).data;

      // Compare pixel values
      const identicalPixels = comparePixelData(imageData1, imageData2);

      // Draw the result on a new canvas
      resultCanvas.width = canvas1.width;
      resultCanvas.height = canvas1.height;
      resultCtx.drawImage(img1, 0, 0);

      markIdenticalAreas(resultCtx, identicalPixels);

      alert(`Identical Pixels: ${identicalPixels}`);
    };

    img2.src = URL.createObjectURL(image2Input.files[0]);
  };

  img1.src = URL.createObjectURL(image1Input.files[0]);
}

function comparePixelData(data1, data2) {
 ...