Cum se schimba culoarea din imaginea folosind javascript Dmitry Shishmakov - secolul xxi de afaceri

Mai recent, se confruntă cu necesitatea de a vopsi imaginea client-side în dezvoltarea unui proiect. Și anume, să înlocuiască o culoare la alta.

(!) În soluția de Internet vorbitoare de limbă rusă nu a fost găsit, astfel încât detaliile de mai jos colegii străini prompte.

Problema poate apărea: de ce să nu încărcați doar o singură imagine cu o culoare diferită?

Răspunsul este simplu: incarcarea serverului ar trebui să fie cât mai scăzut posibil. Puteți returna cele două tipuri de imagini la client (cu culoarea originală și înlocuite), dar acest lucru necesită mai mult trafic și cereri către server (doi la unu).

Mai rațională poate fi o risipă de resurse relativ mici pe partea de utilizator (care nici nu a observat) înlocuirea culorii, ci ca urmare a creșterii performanței serverului.

Exemple de aplicare poate fi de masă și, dacă aveți o problemă similară, ești binevenit. Decizie sub tăietura.

Implementarea se bazează pe pânză. Da, acest lucru înseamnă că utilizatorii de IE8 și versiunile anterioare nu vor vedea modificările. Dar veți fi de acord: utilizați border-radius, precum și alte proprietăți ale CSS3, din cauza comoditatea, „scoring“, pe sprijinul monștrii vechi. Și nu deranjează pe nimeni.

Dacă altcineva folosește de bună voie Windows XP, este puțin probabil ca el sa bucurat cu el IE8. E sinucidere. Cu toate acestea, acest lucru este un subiect pentru un alt articol.

Astfel, metoda se bazează pe pânză. Acesta este algoritmul său:

1. Ia imaginea necesară
2. Puneți-l pe o panza panza
3. Comparați culoarea fiecărui pixel al pânzei, astfel încât aveți nevoie pentru a scăpa
4. Înlocuiți culoare potrivire asupra necesarului
5. Întoarcere imaginea finală

Pentru comoditate, vom accepta și pentru a reveni la imaginea base64. Dar această zonă funcție poate fi modificată cu ușurință.

Este de intrare imagine codificată (date variabile), o culoare înlocuibil într-o matrice formată din 3 culori de model RGB (variabila oldColor), înlocuind culoarea într-o matrice (newColor variabilă).

Nu este necesar să se utilizeze funcția, dacă este necesar, înlocuiți dvs. 3 sau mai multe imagini, în special, în cazul în care acestea sunt mari. În acest caz, întârzierea va fi foarte vizibil pentru utilizator, și cel mai rău caz poate și nu „atârnă“, browser-ul.

Funcția este bine să utilizați, dacă aveți un sprite cu mai multe icoane de aceeași culoare, care trebuie să fie în același timp, pentru a vopsi.