Redimensionamento de imagens no lado do cliente com JavaScript: uma solução de código aberto

No cenário atual de desenvolvimento web, muitas vezes é desejável redimensionar imagens no lado do cliente antes enviando-os para o servidor. Essa abordagem pode otimizar a qualidade da imagem, reduzir a carga do servidor e melhorar a experiência do usuário, acelerando o tempo de carregamento da página.

Embora o Flash seja uma opção comum para redimensionamento de imagens, muitos desenvolvedores preferem evitar seu uso. Felizmente, existe uma solução que utiliza JavaScript para redimensionar imagens de forma eficaz.

Algoritmo de redimensionamento de imagens de código aberto

O algoritmo de código aberto disponível no GitHub (https://gist .github.com/dcollien/312bce1270a5f511bf4a) fornece um método confiável para redimensionar imagens do lado do cliente. Ele oferece uma versão ES6 e uma versão .js que podem ser incluídas em tags de script.

Implementação

Para implementar o algoritmo de redimensionamento, siga estas etapas:

1. Adicione o código HTML conforme mostrado abaixo:

2. Adicione o código JavaScript abaixo:

document.getElementById('select').onchange = function(evt) {
    ImageTools.resize(this.files[0], {
        width: 320, // maximum width
        height: 240 // maximum height
    }, function(blob, didItResize) {
        // didItResize will be true if it managed to resize it, otherwise false (and will return the original file as 'blob')
        document.getElementById('preview').src = window.URL.createObjectURL(blob);
        // you can also now upload this blob using an XHR.
    });
};

Recursos e suporte

O algoritmo possui uma variedade de recursos e suporte, incluindo:

• Redimensionamento com base na largura máxima especificada e altura
• Suporte para detecção e polyfills para compatibilidade entre navegadores
• Exclusão de GIFs animados para eficiência