JSFiddle - React, Tailwind, and code Playground

by morphcast

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/crc-32/1.2.0/crc32.min.js"></script>
Compute CRC32 checksum on image
<input type="file"/>
<div id="log"></div>

JavaScript

document.querySelector("input").onchange = function(e){
	const file = event.target.files[0];
  const url = URL.createObjectURL(file);
  
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const img = new Image();
  img.onload = () => {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
    const imgData = ctx.getImageData(0, 0, img.width, img.height);
    const start = Date.now();
    const cript = CRC32.buf(imgData.data);
    const delta = Date.now() - start;
    console.log("MD5 in ",delta," value ", cript);
    document.getElementById('log').innerHTML = "MD5 in " + delta + "ms, crc32 value: " + cript;
    
  };
  img.src = url;
}