Převeďte obrázek na URI dat pomocí JavaScriptu

Kdykoli se na webu vydám na „výkonnostní běh“, první místo, kam se podívám, jsou snímky. Proč? Protože můžete uložit obrázek z Photoshopu, vložit jej do ImageOptim nebo dokonce TinyPNG a ušetřit 70 % jeho velikosti souboru. Co většina vývojářů nezvažuje? Vezmeme malé soubory obrázků a vytvoříme z nich datové URI namísto tradičních obrázků (další požadavek HTTP). Bohužel k tomu musí dojít v souboru CSS před načtením stránky, ale musíte odněkud získat identifikátor URI dat, že?

Jsem trochu podezřívavý k náhodným webům, které umožňují nahrát soubory nebo obsah a vrátit daný výsledek. neznáte autora uvedeného kódu. Přešel jsem tedy ke svému vlastnímu kódu, který jsem během toho trochu upravil, abych vytvořil nástroj pro převod obrázku na datové URI!

Převést obrázek na datový URI

Stejně jako v mém původním příspěvku se musíme spolehnout na plátno, abychom to zvládli:

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!
});

Můžete to také nastavit tak, abyste místo zpětného volání používali Promises.

Jakmile se obrázek načte, vložíme jej na plátno a poté jeho data exportujeme do datového URI. Z praktického hlediska to není užitečný úkol, protože obrázek se již načetl, ale pokud chcete vytvořit místní nástroj pro provedení tohoto úkolu, tady to je!