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
Desenvolvedor de Software
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.
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.
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
};
});
}
Image
: Criamos um novo objeto Image
para carregar a imagem base64.'/sem_anexo.png'
).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.
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.
Recentemente enquanto utilizava o Linux Mint 21 Vera tive uma série de problemas ao instalar o PGAdmin 4 e numa... Leia mais
Quando trabalhamos com Eloquent no Laravel, frequentemente precisamos realizar consultas baseadas em relacionamentos entre modelos. Para isso, o Laravel oferece... Leia mais
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
Este tutorial rápido e objetivo vai te mostrar como instalar e configurar o OpenSSH no Ubuntu, além de incluir algumas... Leia mais