Resizes image and displays resized version.

by Rapha Souza

HTML

<img id="original" />
<canvas class="canvas" style="display:;"></canvas>
<img id="resized" />

<script>
const imageUrl = "https://t4.ftcdn.net/jpg/07/22/30/69/360_F_722306929_gW8jWzDsIph4XcapEt85rQt55DdSWgUs.jpg"; // đź”— sua URL aqui

const img = new Image();
img.crossOrigin = "anonymous"; // necessário se a imagem estiver em outro domínio
img.src = imageUrl;

img.onload = function () {
  const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");

  // 🔧 Defina o fator de escala
  const scale = 0.5;
  canvas.width = img.width * scale;
  canvas.height = img.height * scale;

  // 🖌️ Redesenha a imagem com nova resolução
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

  // 📦 Converte para base64
  const resizedDataUrl = canvas.toDataURL("image/jpeg", 0.8);

  // Exibe imagens
  document.getElementById("original").src = imageUrl;
  document.getElementById("resized").src = resizedDataUrl;
  
};
</script>