JSFiddle - React, Tailwind, and code Playground

by neonDog

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/spark-md5/3.0.2/spark-md5.min.js"></script>

JavaScript

async function fetchImage(url) {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`Failed to fetch image from ${url}. Status: ${response.status}`);
  }
  const arrayBuffer = await response.arrayBuffer();
  return new Uint8Array(arrayBuffer);
}


function calculateHash(data) {
  return new Promise((resolve, reject) => {
    const blob = new Blob([data]);
    const reader = new FileReader();

    reader.onloadend = function () {
      const spark = new SparkMD5.ArrayBuffer();
      spark.append(reader.result);
      const hash = spark.end();
      resolve(hash);
    };

    reader.onerror = function (error) {
      reject(error);
    };

    reader.readAsArrayBuffer(blob);
  });
}


const test = async(url='https://i.imgur.com/0KPwthk.jpeg') => {
	
	const img = await fetchImage(url);
  const hash = await calculateHash(img);
  console.log(hash);
	
};

console.log(test());