
Primeiros Passos com Go: Criando uma Aplicação Interativa do Zero
Se você está começando a aprender Go e quer fazer algo prático, vou te mostrar como criar uma aplicação básica... 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.
Se você está começando a aprender Go e quer fazer algo prático, vou te mostrar como criar uma aplicação básica... Leia mais
Desenvolver WordPress localmente com Docker é uma maneira eficiente de criar e testar plugins, temas e personalizações. Neste artigo, vamos... Leia mais
Neste post, você aprenderá a fazer o deploy de uma aplicação Laravel em uma VPS rodando Ubuntu com o servidor... Leia mais
Tabela para consulta rápida a convenção de nomes utilizadas em projetos Laravel: Leia mais