Diskuze: Změna barvy png

JavaScript JavaScript Změna barvy png

Avatar
Pavel Junek
Redaktor
Avatar
Pavel Junek:

Zdravím,
mám png obrázek s průhledným pozadím.

<div class="obr-obal">
    <img src="obr.png" class="obr" id="obr"/>
</div>

Existuje nějaký způsob, jak změnit barvu tohoto obrázku (při najetí myši) za použití jQuery?

 
Odpovědět 29.3.2015 18:39
Avatar
IT Man
Redaktor
Avatar
Odpovídá na Pavel Junek
IT Man:

Vytvoř si druhý obrázek a po najetí to změň na ten druhý obrázek, ne? :)

Nahoru Odpovědět 29.3.2015 18:53
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
patrik.valkovic
Šéfredaktor
Avatar
Odpovídá na Pavel Junek
patrik.valkovic:

Pokud chceš změnit barvu celého obrázku (a ne jen pozadí), tak nemáš jinou možnost než vytvořit druhý png obrázek a ten použít. JavaScript nemá žádné funkce pro manupulaci s PNG (a vzhledem ke složitosti se ani nedivím). Pokud chceš změnit jen pozadí tak po najetí myši změn background-color.

Nahoru Odpovědět 29.3.2015 19:00
Nikdy neumíme dost na to, abychom se nemohli něco nového naučit.
Avatar
Pavel Junek
Redaktor
Avatar
Odpovídá na patrik.valkovic
Pavel Junek:

Právěže chci změnit jenom ten obrázek (bez pozadí).

A dělat nový ručně se mi moc nechce, protože není jeden, ale je jich víc.

 
Nahoru Odpovědět 29.3.2015 19:30
Avatar
Peas
Člen
Avatar
Odpovídá na Pavel Junek
Peas:

Cauko. Jedno z rieseni je pouzit -webkit-filtre, ktore ti umoznuju zmenit okrem ineho aj farbu obrazkov s alfa kanalom, pricom pozadie ostane stale priehladne. Patria sem napriklad: saturate; grayscale; contrast; brightness; blur; invert; sepia; huerotate alebo rss.opacity.
Jednoduchy priklad:
https://jsfiddle.net/g4phppf2/

V pripade, ze pozadovane obrazku su ikony, tak vhodnym riesenim je vygenerovat si z nich icon font a farby uz mozes menit podla potreby ako pri fontoch (color: blue;).

 
Nahoru Odpovědět 30.3.2015 12:45
Avatar
Pavel Mareš
Redaktor
Avatar
Pavel Mareš:

Nebo strašně jednoduše :hover::after { // zde bude div, který se zobrazí po najetí a je fuk, jestli to bude obrázek nebo jen barva }.

Nahoru Odpovědět 30.3.2015 12:59
Nechci být workoholik. Bohužel někdy musíme být tím, čím nechceme.
Avatar
Aleš Lulák
Člen
Avatar
Odpovídá na Pavel Junek
Aleš Lulák:

Nevím jaké máš přesně účely, ale na složitější manipulace s obrázkem budeš muset sáhnout po canvasu.

Ve finále to není nic težkého, jen si vlastně hraješ s pixely. Například pro odstranění barev bys použil něco jako:

var c = document.getElementById("workspace");
var ctx = c.getContext("2d");

function greyscale() {
        horizontal = picture.width; //picture bude tvuj canvas vlastne
        vertical = picture.height;
        imgData = ctx.getImageData(0, 0, horizontal-1, vertical-1);
        for (var i=0;i<imgData.data.length;i+=4) {
         averge = Math.round((imgData.data[i] + imgData.data[i+1] + imgData.data[i+2]) / 3);
         imgData.data[i] = averge;
         imgData.data[i+1] = averge;
         imgData.data[i+2] = averge;
         //imgData.data[i+3] = 255; toto je jiz alfakanal
        }
        ctx.putImageData(imgData,0,0);
}
Editováno 30.3.2015 13:13
Nahoru Odpovědět 30.3.2015 13:08
Jsem hloupý člověk, proto se musím vzdělávat
Avatar
Michal Žůrek (misaz):

Můžeš se mrknout http://www.itnetwork.cz/…ubliny-efekt tam tím způsobem jsi schopný udělat cokoliv.

Nahoru Odpovědět 30.3.2015 13:20
Nesnáším {}, proto se jim vyhýbám.
Avatar
Pavel Junek
Redaktor
Avatar
Pavel Junek:

Díky moc za odpovědi, vypadá to, že jinak než přes canvas to nepůjde. Bohužel teď nemám moc času, ale hned jak budu mít, tak se a to podívám a označím řešení ;)

 
Nahoru Odpovědět 7.4.2015 19:39
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 9 zpráv z 9.