Redimensionar Imagem base64 await

by Rapha Souza

HTML

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>  
</div>

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

JavaScript

var respostaBase64 = await redimensioarImagem('https://t4.ftcdn.net/jpg/07/22/30/69/360_F_722306929_gW8jWzDsIph4XcapEt85rQt55DdSWgUs.jpg')



async function redimensioarImagem(imageUrl, scale = 0.5, format = "image/jpeg", quality = 0.8) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.crossOrigin = "anonymous"; // necessário para imagens externas
        img.src = imageUrl;

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

            canvas.width = img.width * scale;
            canvas.height = img.height * scale;

            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

            try {
                const dataUrl = canvas.toDataURL(format, quality);
                resolve(dataUrl);
            } catch (error) {
                reject(error);
            }
        };

        img.onerror = () => reject(new Error("Erro ao carregar imagem."));
    });
}