0

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

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

2
  • Сделать отдельный слой только для фона, а все остальные элементы телефона разместить поверх него? А при клике, можно только фоновой картинке в CSS давать соответствующий filter: hue-rotate(...) 28 мая 2021 в 21:16
  • Проблема в том что у меня кроме цвета чехла, ещё должен меняться цвет яблока, и плюс с этим hue-rotate очень сложно подобрать правильную палитру цветов(практически нереально) или по крайней мере я не знаю как это сделать 28 мая 2021 в 22:03

1 ответ 1

0

Можно сделать чёрно-белые слои нужных частей чехла в PNG, вырезанные отдельно и наложенные один поверх другого (одинаковые по габаритам но с прозрачностью вокруг объекта для совпадения позиций), и применять к ним фильтр feColorMatrix с рассчитанной матрицей для нужного вам RGB тонирования. Понять как составить такую матрицу не сложно, нужно лишь про них почитать. Вот пример:

const makeMatrixValue = ( r, g, b ) => `${r/255} 0 0 0 0 ${g/255} 0 0 0 0 ${b/255} 0 0 0 0 0 0 0 1 0`;

// Задаём первой матрице например пурпурный цвет:
document.querySelector('#myfilter1 feColorMatrix').setAttribute( 'values', makeMatrixValue( 255, 0, 255 ) );

// Задаём второй матрице например светло-циановый цвет:
document.querySelector('#myfilter2 feColorMatrix').setAttribute( 'values', makeMatrixValue( 200, 255, 255 ) );
<svg style="display: none">
  <filter id="myfilter1">
    <feColorMatrix in="SourceGraphic" type="matrix" color-interpolation-filters="sRGB" values="
    1 0 0 0 0
    0 1 0 0 0
    0 0 1 0 0
    0 0 0 1 0
    "></feColorMatrix>
  </filter>
  <filter id="myfilter2">
    <feColorMatrix in="SourceGraphic" type="matrix" color-interpolation-filters="sRGB" values="
    1 0 0 0 0
    0 1 0 0 0
    0 0 1 0 0
    0 0 0 1 0
    "></feColorMatrix>
  </filter>
</svg>

<img src="https://picsum.photos/200/300?grayscale">
<img src="https://picsum.photos/200/300?grayscale" style="filter: url(#myfilter1)">
<img src="https://picsum.photos/200/300?grayscale" style="filter: url(#myfilter2)">

Вместо RGB можно и #FF00FF сделать, но найти в интернете функцию преобразования легко.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.