PauloRB.dev

Desenvolvedor de Software

Como Redimensionar Imagens Base64 com JavaScript e TypeScript | PauloRB.dev Como Redimensionar Imagens Base64 com JavaScript e TypeScript - PauloRB.dev
Como Redimensionar Imagens Base64 com JavaScript e TypeScript

Como Redimensionar Imagens Base64 com JavaScript e TypeScript

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:

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

  1. Imagem Base64 como Input: A função recebe uma string base64 representando a imagem.
  2. Objeto Image: Criamos um novo objeto Image para carregar a imagem base64.
  3. Redimensionamento: Se a largura da imagem for maior que 150px, ela é redimensionada proporcionalmente. O objetivo é preservar a proporção da imagem original.
  4. Canvas: Utilizamos o canvas para redesenhar a imagem com o novo tamanho, convertendo o resultado de volta para base64.
  5. 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.

Mais Posts

Instalar o PGAdmin 4 em distribuições Linux Debian 12

Instalar o PGAdmin 4 em distribuições Linux Debian 12

Recentemente enquanto utilizava o Linux Mint 21 Vera tive uma série de problemas ao instalar o PGAdmin 4 e numa... Leia mais

Laravel: Trabalhando com whereHas e with de forma simples

Laravel: Trabalhando com whereHas e with de forma simples

Quando trabalhamos com Eloquent no Laravel, frequentemente precisamos realizar consultas baseadas em relacionamentos entre modelos. Para isso, o Laravel oferece... Leia mais

Habilitar Sudo no Debian e seus derivados

Habilitar Sudo no Debian e seus derivados

Por padrão o debian não trás o sudo habilitado como estamos acostumados no Ubuntu e outro de seus derivados como... Leia mais

Instalação e Configuração do OpenSSH no Ubuntu

Instalação e Configuração do OpenSSH no Ubuntu

Este tutorial rápido e objetivo vai te mostrar como instalar e configurar o OpenSSH no Ubuntu, além de incluir algumas... Leia mais