img tag on load size check

이미지를 img 태그를 사용하여 로드하고, 로드가 완료되면 JavaScript를 사용하여 이미지 용량을 체크할 수 있습니다.

<img src="https://example.com/image.png" onload="checkImageSize(this)">

function checkImageSize(img) {
  var imageSizeInBytes = calculateImageSizeInBytes(img);
  console.log("이미지 용량: " + formatBytes(imageSizeInBytes));
}

function calculateImageSizeInBytes(img) {
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  var dataUrl = canvas.toDataURL("image/png");
  var binary = atob(dataUrl.split(",")[1]);
  return binary.length;
}

function formatBytes(bytes) {
  if (bytes < 1024) return bytes + " 바이트";
  else if (bytes < 1048576) return (bytes / 1024).toFixed(1) + " KB";
  else if (bytes < 1073741824) return (bytes / 1048576).toFixed(1) + " MB";
  else return (bytes / 1073741824).toFixed(1) + " GB";
}