Как да промените цвета на изображението с помощта на JavaScript Дмитрий Shishmakov - бизнес XXI век

Съвсем наскоро, изправени пред необходимостта да се пребоядиса от страна на клиента изображение в развитието на даден проект. А именно, да замени един цвят в друг.

(!) В Internet решение рускоезичното не е намерен, така че данните по-долу бързи чуждестранни колеги.

Може да възникне въпросът: защо просто не се зареди едно изображение с различен цвят?

Отговорът е прост: натоварването на сървъра трябва да бъде възможно най-ниски. Можете да се върнете двата вида изображения на клиента (с оригиналния цвят и се заменя), но това изисква по-голям трафик и заявки до сървъра (12:58).

По-рационално може да бъде загуба на сравнително малки ресурси от страна на потребителя (който дори не забеляза) замяната на цвят, но в резултат на увеличение на производителността на сървъра.

Примери за прилагането може да бъде масово и, ако имате подобен проблем, вие сте добре дошли. Решение при среза.

Изпълнението се основава на платното. Да, това означава, че потребителите на IE8 и по-рано няма да видите промените. Но вие ще се съгласите: вие използвате граничен радиус, както и други свойства на CSS3, защото на удобство, "точкуване" на подкрепата на старите чудовища. И това не притеснява никого.

Ако някой друг охотно използва Windows XP, че е малко вероятно, че той се е ползвал с него IE8. Това е самоубийство. Все пак, това е тема за друга статия.

По този начин, този метод се базира върху платното. Това е неговият алгоритъм:

1. Предприемат необходимите изображението
2. Поставете го върху платно платно
3. Сравнете цвета на всеки пиксел на платното, така че трябва да се отървете
4. Сменете съвпадащи цвят на необходимите
5. Върнете окончателното изображение

За удобство, ние приемаме и да се върне по-голям base64. Но тази функция област може лесно да бъде променена.

Има вход кодирано изображение (променливи данни), сменяем цвят в масив, състоящ се от 3 цвята RGB модела (променлива oldColor), на мястото на цвета в масив (променлива newColor).

Не е необходимо да използвате функцията, ако е необходимо, сменете си 3 или повече снимки и по-специално, ако те са големи. В такъв случай, че забавата ще бъде много видими за потребителя, а в най-лошия може и "виси" на браузъра.

Функцията е добре да се използва, ако имате спрайт с много икони от същия цвят, които трябва да бъдат в същото време да се пребоядиса.