Как с помощью канваса сделать фильтр по цвету по примеру?

Question

[vlad123032]

Сейчас разрабатываю лендинг по чехлам, и мне нужен фильтр по цветам. У меня будет более 50 цветов для 11 разных моделей айфонов, поэтому хочется сделать 11 фотографий или canvas (я не знаю что должно быть поэтому и зашел сюда на форум)
И вообщем, чтобы не делать 500 фотографий с разными цветами, я хочу просто выбирать цвет и менять только цвет заднего фона чехла, а не менять фотографию, как это можно сделать?
Вот пример - https://endorphone.com.ua/personalcase/apple-iphon...

Сори если не доходчиво объяснил, в кратце мне нужен фильтр по цветам для разных моделей айфонов, но я не хочу использовать 500 фотографий для этого и писать код на jquery для каждого цвета и модели...
Спасибо за то что дочитали до конца :)

Answer 1

[Вадим]

Что-то вроде такого?
помимо hue-rotate можно добавить ещё saturate.


UPD: вспомнил видел с range-слайдером крутилку цвета. Вот тут можно бегунком цвет менять. Принцип работы такой же.

Comments

[vlad123032]

Сначала понравилось, потом понял что возникли некоторые сложности, палитрой подбирать цвета вообще нереально, кроме этого должна быть возможность менять цвет яблока потому что он тоже разный для каждого цвета... Чехол у меня именно с яблоком

[Вадим]

vlad123032, чтобы понимать как этим пользоваться - нужно ознакомиться с цветовой моделью HSL, и что такое цветовой круг. Вот хорошая статья с разбором - https://habr.com/ru/post/496768/

А так же можно вбить в поисковик "цветовой круг HSL" и в разделе картинок получить разбитый на градусы круг, для более простого подбора цвета.

По поводу яблока, извините, но это уже какие-то капризы из серии "Я не хочу подумать головой, мне не подходит". В таком случае нужно идти на habr.freelance.

Что мешает сделать яблоко отдельной картинкой и при нажатии на кнопку менять цвет обеим? Отдельно чехлу, отдельно яблоку?

И ещё, насколько я знаю, сервисы подобного рода заранее предупреждают, что выбранный в веб-интерфейсе цвет не будет максимально точно соответствовать тому, что выдаст принтер, так как браузер и принтер оперируют разными цветовыми системами и при конвертации возможны искажения.

[Вадим]

vlad123032, Альтернативные варианты есть. С помощью SVG-фильтров, например. Но там два режима. Один работает так же, другой через матрицу - ещё сложнее.
Фильтры на канвасе работают точно так же, как в моём ответе + не поддерживаются у Вашей целевой аудитории + осложняет реализацию внедрением самого канваса.