Vytvorenie prázdneho obrázka v JavaScripte

Pri SPA aplikáciách sa mi často stáva, že potrebujem vygenerovať predvolený obrázok napr. k nejakému produktu, blogu, atď.. Historicky som to riešil tak, že som na mal servery vygenerovaný predvolený obrázok, na ktorý som odkazoval a to len v prípade, že obrázok nebol uploadnutý. Pomocou nižšie uvedenej funkcie vieš ušetriť minimálne jeden request na server a čo je super, ak používaš napr. nejaký rozmer obrázku a responzívnosť, tak nemusíš nastavovať minimálnu šírku a výšku, pretože veľkosť obrázka vygeneruješ podľa svojich potrieb.

Funkcia na vygenerovanie obrázka

Žiadny komplikovaný algoritmus, proste na pozadí sa vytvorí canvas element a jeho obsah sa uloží do base64. Výsledok base64 môžeme priamo vložiť do img.src.

function generateImage(width, height, color) {
    var canvas = document.createElement('canvas');
    
    canvas.width = width;
    canvas.height = height;
    
    var ctx = canvas.getContext('2d');

    if (color) {
        ctx.fillStyle = color;
        ctx.fillRect(0, 0, width, height);
    }

    return canvas.toDataURL('image/png');
}

Použitie funkcie

var empty = generateImage(300, 200, 'white');

// Ukážka za použitia jQuery
$('.my-selector').each(function() {
    $(this).attr('src', empty);
});