Como Redimensionar Imagens Base64 com JavaScript e TypeScript

Por Paulo RB em 15/10/2024

Ao trabalhar com imagens base64 no front-end, é comum precisar redimensioná-las para melhorar o desempenho da aplicação, especialmente ao enviá-las para servidores ou APIs. Neste artigo, vamos explorar como redimensionar imagens base64 com JavaScript, garantindo que sua largura não exceda 150px. A solução é desenvolvida em TypeScript para garantir maior segurança e clareza no código.

Por que Redimensionar Imagens?

Imagens grandes em base64 podem impactar a performance de carregamento, principalmente em dispositivos móveis com conexões limitadas. Redimensionar essas imagens reduz o tamanho dos dados enviados, resultando em uma melhor experiência do usuário.

Passo a Passo para Redimensionar Imagens Base64

Função JavaScript Simples

O código abaixo é uma função simples em JavaScript que redimensiona uma imagem base64 para uma largura máxima de 150px:

Copy Code


function resizeBase64Image(base64Image: string): Promise<string> {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = base64Image;

    img.onload = () => {
      const canvas = document.createElement('canvas');
      let width = img.width;
      let height = img.height;

      // Limita a largura para no máximo 150px
      if (width > 150) {
        height = (height * 150) / width;
        width = 150;
      }

      canvas.width = width;
      canvas.height = height;
      const ctx = canvas.getContext('2d');
      if (ctx) {
        ctx.drawImage(img, 0, 0, width, height);
        const resizedBase64 = canvas.toDataURL('image/jpeg');
        resolve(resizedBase64);
      } else {
        reject(new Error("Erro ao obter contexto 2D"));
      }
    };

    img.onerror = (err) => {
      console.error("Erro ao carregar a imagem: ", err);
      resolve('/sem_anexo.png'); // Retorna a URL de fallback em caso de erro
    };
  });
}

Entendendo a Função

Imagem Base64 como Input: A função recebe uma string base64 representando a imagem.

Objeto Image: Criamos um novo objeto Image para carregar a imagem base64.

Redimensionamento: Se a largura da imagem for maior que 150px, ela é redimensionada proporcionalmente. O objetivo é preservar a proporção da imagem original.

Canvas: Utilizamos o canvas para redesenhar a imagem com o novo tamanho, convertendo o resultado de volta para base64.

Tratamento de Erros: Em caso de erro, como falha ao carregar a imagem, o código retorna uma URL de fallback ('/sem_anexo.png').

Benefícios de Usar TypeScript

O TypeScript garante que tipos corretos sejam usados em todos os pontos do código. Isso evita erros de execução ao garantir que estamos sempre manipulando os tipos corretos, como strings ou objetos de imagem. Além disso, o uso de promessas facilita o manuseio assíncrono.

Conclusão

Redimensionar imagens em base64 usando JavaScript ou TypeScript é uma tarefa simples, mas essencial para melhorar a performance de aplicações que trabalham com uploads de imagens. Este exemplo mostra como você pode adaptar o tamanho da imagem com facilidade e robustez.

Para mais detalhes, você pode conferir o artigo Resizing Base64 Images with JavaScript, que inspirou essa solução.

PauloRB.dev