read md5 hash from image in javascript

index.tsx
// First, let's define a helper function to load the image and get pixel data
function getImageData(file) {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.crossOrigin = 'Anonymous'; // to prevent CORS issues
    image.onload = function() {
      const canvas = document.createElement('canvas');
      canvas.width = image.width;
      canvas.height = image.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(image, 0, 0);
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      resolve(imageData);
    };
    image.onerror = reject;
    image.src = URL.createObjectURL(file);
  });
}

// Next, let's define a function to generate the MD5 hash
function generateMD5(imageData) {
  const uint8Array = imageData.data;
  const buffer = new ArrayBuffer(uint8Array.length);
  const view = new DataView(buffer);
  for (let i = 0; i < uint8Array.length; i++) {
    view.setUint8(i, uint8Array[i]);
  }
  const hash = md5(buffer); // use any MD5 library here
  return hash;
}

// Now, let's put everything together
const fileInput = document.getElementById('image-file-input');
fileInput.addEventListener('change', async function() {
  const file = fileInput.files[0];
  const imageData = await getImageData(file);
  const hash = generateMD5(imageData);
  console.log(`MD5 hash for ${file.name}: ${hash}`);
});
1386 chars
40 lines

<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.18.0/js/md5.min.js"></script>
96 chars
2 lines