Converter imagem em URI de dados com JavaScript

Sempre que faço uma “execução de desempenho” em um site, o primeiro lugar que procuro são as imagens. Por quê? Porque o senhor pode salvar uma imagem do Photoshop, colocá-la no ImageOptim ou até mesmo no TinyPNG e economizar 70% do tamanho do arquivo. O que a maioria dos desenvolvedores não considera? Pegar arquivos de imagem minúsculos e transformá-los em URIs de dados em vez de imagens tradicionais (outra solicitação HTTP). Infelizmente, isso precisa acontecer no arquivo CSS antes do carregamento da página, mas o senhor precisa obter esse URI de dados de algum lugar, certo?

Desconfio um pouco de sites aleatórios que permitem o upload de arquivos ou conteúdo e retornam um determinado resultado; o senhor não conhece o autor desse código. Portanto, eu fui para meu próprio código, modificando-o um pouco ao longo do caminho, para criar um utilitário para converter uma imagem em URI de dados!

Converter imagem em URI de dados

Como em minha postagem original, precisamos contar com o canvas para fazer o trabalho pesado:

function getDataUri(url, callback) {
    var image = new Image();

    image.onload = function () {
        var canvas = document.createElement('canvas');
        canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
        canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size

        canvas.getContext('2d').drawImage(this, 0, 0);

        // Get raw image data
        callback(canvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, ''));

        // ... or get as Data URI
        callback(canvas.toDataURL('image/png'));
    };

    image.src = url;
}

// Usage
getDataUri('/logo.png', function(dataUri) {
    // Do whatever you'd like with the Data URI!
});

O senhor também poderia configurar isso para usar Promises em vez de um retorno de chamada.

Depois que a imagem é carregada, nós a colocamos no canvas e exportamos seus dados para um URI de dados. Em termos práticos, essa não é uma tarefa útil, pois a imagem já foi carregada, mas se o senhor quiser criar um utilitário local para executar essa tarefa, aqui está!