Peter Širka - Brutal Web Developer
Vytvorenie prázdneho obrázka v JavaScripte

Thu Sep 01 2016 23:22:18 GMT+0200 (Central European Summer Time)

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

Značky


Posledné blogy
Brutálny polrok 2018
Fri Jun 22 2018 09:48:21 GMT+0200 (Central European Summer Time)
Konferencia/Workshop: TotalCon 2017
Thu Nov 16 2017 22:06:55 GMT+0100 (Central European Standard Time)
CodeCon 2017 z pohľadu organizátora
Sun Apr 09 2017 09:27:34 GMT+0200 (Central European Summer Time)
Elektrický bicykel KTM MACINA KAPOHO SLX 2017
Fri Mar 31 2017 15:32:37 GMT+0200 (Central European Summer Time)
Total.js platforma - školenia
Mon Jan 16 2017 18:35:05 GMT+0100 (Central European Standard Time)

Posledné komentáre
Thank you for your work! You are the great friend, great person and great expert!
Jozef Gula
Mon Jun 25 2018 08:02:14 GMT+0200 (Central European Summer Time)
It's been an absolute pleasure collaborating with you Peter, I've learned so much from Total.js a...
Pedro Costa
Fri Jun 22 2018 19:18:22 GMT+0200 (Central European Summer Time)
Tento skateboard až tak kopec nerieši, pretože má 2 silné motory. So mnou vyšiel všade, kde som b...
Peter Širka
Fri Jul 14 2017 09:30:56 GMT+0200 (Central European Summer Time)
Dobry den jak se vypořadavá s kopci ?
Lukáš
Thu Jul 13 2017 20:44:43 GMT+0200 (Central European Summer Time)
Chlapci z firmy Nazaret Pánu Bohu ďakujú a Tebe blahoželajú k dobre odvedenej práci. Super Peťo, ...
Tomáš
Thu Dec 15 2016 08:08:15 GMT+0100 (Central European Standard Time)