OffscreenCanvas vs. (re-)fetch to get image as ArrayBuffer

by sfoster

HTML

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAABQklEQVQ4T92UMUsDQRCF55LorUbvYpHYKAiChf/AQhTBysbaSjtLG0vBxj6thSAW1pY2B4KCVhYB7YTtIkiIc5FAghDfupOcE7DSKguP92Zn+dibOy54rD31mpzSX9ZMHFGQ3N73NlZXFOc9zpFdKPwqLuXV+eTucvRBW+t6RlGe7PwY2TknzGqQUSNzlNMzqp3KjPa3NagIUDkkWxn3XnYOVXxm9H+upHEkoJNdDQpxi9iQjUQxAINsiNFXILMnoIsDDSrgEcIJsgYKJ33+rn1m9BVocVNAN8caRABRMVPgMiCyx+gr0NqygF6qGvSJeXSmyHanvfclNaOvQDv9L7t7rkEdzCQFJI28Ws6zmtFXoMNUbjR7pUFtgN5iqCTuclZz22hQ9VlAS9ca1MLbegXEqT7k2OOPIdDZw0iD/uvH9gUtdzdqJEp8wgAAAABJRU5ErkJggg==" width="2" height="2">

JavaScript

function getImageAsArrayBuffer(img) {
  const width = img.naturalWidth, height = img.naturalHeight;
  console.log(`getImageAsArrayBuffer, width: ${width}, height: ${height}, img:`, img);
  const canvas = new OffscreenCanvas(width, height);
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);

  let buf = ctx.getImageData(0, 0, width, height).data.buffer;
  console.log("getImageAsArrayBuffer", buf);
  return buf;
}

async function fetchImageAsArrayBuffer(url) {
  const response = await fetch(url);
  const buf = await response.arrayBuffer();
  console.log("fetchImageAsArrayBuffer", buf);
  return buf;
}

window.onload = async () => {
	getImageAsArrayBuffer(document.images[0]);
	await fetchImageAsArrayBuffer(document.images[0].src);
}