Redimensionar imagem

by Rapha Souza

HTML

<img id="original" />
<canvas class="canvas" style="display:;"></canvas>
<img class="resized" />
<button onclick="teste()">teste</button>
<script>

    function teste(){
  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.getElementsByClassName("canvas")[0]
    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.getElementsByClassName("resized")[0].src = resizedDataUrl;

    //$("#resized").attr("src", resizedDataUrl)

  };

  }
</script>