ewwink · June 30, 2022 19:40
diff --git a/resize-images-with-javascript.html b/resize-images-with-javascript.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
  <meta charset="utf-8">
  <title>Resize Image with Javascript</title>
  <style>
    #imgResult,
    [type=text] {
      width: 300px;
    }
  </style>
 </head>

 <body>
  <h1>Resize Image to 750x750</h1>
  <input type="text" id="imgUrl" value="https://cf.shopee.co.id/file/9f3e33fcf298c5bac74bc68cea00b888">
  <p><button class="btn toBlob">canvas.toBlob</button> <button class="btn">canvas.toDataURL</button></p>
  <a download="result.jpg" href="" title="Click to download">
    <img id="imgResult">
  </a>

  <script>
    document.querySelectorAll(".btn").forEach(function(i) {
      i.addEventListener("click", function() {
        let isToBlob = this.className.includes('toBlob');
        resizeImg(isToBlob, 'red');
      });
    })

    function dataURLtoBlob(dataurl) {
      let arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], {
        type: mime
      });
    }
    async function dataURItoBlob(dataURI) {
      return await (await fetch(dataURI)).blob();
    }

    function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
      var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
      return {
        width: Math.round(srcWidth * ratio),
        height: Math.round(srcHeight * ratio)
      };
    }

    //https://i.imgur.com/fwiTWDf.png
    //https://i.imgur.com/EelUtdR.jpeg
    async function resizeImg(toBlob, bgColor) {
      let imgSrc = await fetch(imgUrl.value.trim());
      let imageFile = await imgSrc.blob();
      let startTime = Date.now();

      let bitmap = await createImageBitmap(imageFile);
      console.log(bitmap)
      let canvas = document.createElement("canvas");
      let ctx = canvas.getContext("2d");

      canvas.width = canvas.height = 750;
      ctx.fillStyle = bgColor ? bgColor : "white";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      let wh = calculateAspectRatioFit(bitmap.width, bitmap.height, 750, 750);
      console.log('eee', wh)
      let sx = Math.round((750 - wh.width) / 2);
      let sy = Math.round((750 - wh.height) / 2);
      ctx.drawImage(bitmap, sx, sy, wh.width, wh.height);
      let dataUrl = canvas.toDataURL("image/jpeg", 0.9);

      if (toBlob) {
        let dataBlob = await dataURItoBlob(dataUrl);
        console.log(dataBlob)
        dataUrl = URL.createObjectURL(dataBlob);
      }

      imgResult.src = dataUrl;
      imgResult.parentElement.href = dataUrl;
      console.log('Time Taken: ', Date.now() - startTime);
    }
  </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<title>Resize Image with Javascript</title>
	<style>
	#imgResult,
	[type=text] {
	width: 300px;
	}
	</style>
	</head>

	<body>
	<h1>Resize Image to 750x750</h1>
	<input type="text" id="imgUrl" value="https://cf.shopee.co.id/file/9f3e33fcf298c5bac74bc68cea00b888">
	<p><button class="btn toBlob">canvas.toBlob</button> <button class="btn">canvas.toDataURL</button></p>
	<a download="result.jpg" href="" title="Click to download">
	<img id="imgResult">
	</a>

	<script>
	document.querySelectorAll(".btn").forEach(function(i) {
	i.addEventListener("click", function() {
	let isToBlob = this.className.includes('toBlob');
	resizeImg(isToBlob, 'red');
	});
	})

	function dataURLtoBlob(dataurl) {
	let arr = dataurl.split(','),
	mime = arr[0].match(/:(.*?);/)[1],
	bstr = atob(arr[1]),
	n = bstr.length,
	u8arr = new Uint8Array(n);
	while (n--) {
	u8arr[n] = bstr.charCodeAt(n);
	}
	return new Blob([u8arr], {
	type: mime
	});
	}
	async function dataURItoBlob(dataURI) {
	return await (await fetch(dataURI)).blob();
	}

	function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
	var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
	return {
	width: Math.round(srcWidth * ratio),
	height: Math.round(srcHeight * ratio)
	};
	}

	//https://i.imgur.com/fwiTWDf.png
	//https://i.imgur.com/EelUtdR.jpeg
	async function resizeImg(toBlob, bgColor) {
	let imgSrc = await fetch(imgUrl.value.trim());
	let imageFile = await imgSrc.blob();
	let startTime = Date.now();

	let bitmap = await createImageBitmap(imageFile);
	console.log(bitmap)
	let canvas = document.createElement("canvas");
	let ctx = canvas.getContext("2d");

	canvas.width = canvas.height = 750;
	ctx.fillStyle = bgColor ? bgColor : "white";
	ctx.fillRect(0, 0, canvas.width, canvas.height);
	let wh = calculateAspectRatioFit(bitmap.width, bitmap.height, 750, 750);
	console.log('eee', wh)
	let sx = Math.round((750 - wh.width) / 2);
	let sy = Math.round((750 - wh.height) / 2);
	ctx.drawImage(bitmap, sx, sy, wh.width, wh.height);
	let dataUrl = canvas.toDataURL("image/jpeg", 0.9);

	if (toBlob) {
	let dataBlob = await dataURItoBlob(dataUrl);
	console.log(dataBlob)
	dataUrl = URL.createObjectURL(dataBlob);
	}

	imgResult.src = dataUrl;
	imgResult.parentElement.href = dataUrl;
	console.log('Time Taken: ', Date.now() - startTime);
	}
	</script>
	</body>

	</html>