Redimensionamento de imagens no lado do cliente com JavaScript antes do upload

O redimensionamento de imagens no lado do cliente oferece várias vantagens antes de seu upload para o servidor. Ele reduz a carga do servidor, acelera a renderização da página e fornece uma melhor experiência ao usuário.

É possível redimensionar imagens JavaScript do lado do cliente?

Sim, é possível redimensionar imagens do lado do cliente usando JavaScript. Existem algoritmos de código aberto disponíveis que permitem o redimensionamento sem recorrer ao Flash.

Algoritmo para redimensionamento de imagens do lado do cliente

Um desses algoritmos está disponível no GitHub: https: //gist.github.com/dcollien/312bce1270a5f511bf4a. Inclui versões em ES6 e JavaScript vanilla que podem ser incorporadas em qualquer aplicativo da web.

Exemplo de uso

Para usar o algoritmo:

1. Incorpore o código JavaScript fornecido em sua página da web.
2. Defina uma entrada para seleção de arquivo e especifique uma tag de imagem para exibir o redimensionado imagem.
3. No ouvinte de evento onchange para a entrada, invoque a função de redimensionamento fornecida pelo algoritmo. Especifique as dimensões desejadas e uma função de retorno de chamada.
4. A função de retorno de chamada receberá o blob redimensionado e um sinalizador indicando se o redimensionamento foi bem-sucedido.
5. Use o blob retornado para definir o atributo src do tag de imagem para visualizar a imagem redimensionada.

Recursos

• Suporta ambos ES6 e JavaScript vanilla.
• Detecta automaticamente os recursos do navegador e aplica polyfills para compatibilidade ideal.
• Ignora imagens GIF animadas para manter sua integridade.