Diskuze: Změna barvy png

JavaScript JavaScript Změna barvy png

Aktivity (1)
Avatar
Pavel Junek
Redaktor
Avatar
Pavel Junek:29.3.2015 18:39

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:29.3.2015 18:53

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
Usmívej se, zítra už tvůj kód nemusí fungovat!
Avatar
patrik.valkovic
Šéfredaktor
Avatar
Odpovídá na Pavel Junek
patrik.valkovic:29.3.2015 19:00

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:29.3.2015 19:30

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:30.3.2015 12:45

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š:30.3.2015 12:59

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:30.3.2015 13:08

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
"I disapprove of what you say, but I will defend to the death your right to say it" - Evelyn Beatrice Hall
Avatar
Michal Žůrek (misaz):30.3.2015 13:20

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:7.4.2015 19:39

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.