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

Question

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

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

Answer 1

Можно сделать чёрно-белые слои нужных частей чехла в 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 сделать, но найти в интернете функцию преобразования легко.

БЛОГ НА HUSL

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

Ответы (1 шт):