Как закрасить прозрачную область png?

Question

[Suleimanov_Ismar]

Здравствуйте,

Есть png:


Нужно закрасить текстурной картинкой png где прозрачная область.


Использую Css Mask, но макса наоборот обходит прозрачные слои.
Думал через Css clip-path получится обойти, но никак не получается, может быть у вас есть подсказки как можно решить данную задачу?

Быть может формат картинок поменять, в виде svg или другие форматы?
Фото обуви это пример, могут быть разные модели, и соответственно разные зоны закраски.

Ожидаемый результат:


Пожалуйста подскажите куда копать?

Comments

[Алексей Дубровин]

Положите сначала фоновую картинку. А потом сверху с прозрачным фоном.
Если фон прозрачный, следовательно, фоновую картинку будит видно

[Suleimanov_Ismar]

Алексей Дубровин, Спасибо за ответ, но я так пробовал, это приводит к тому, что надо форму цвета делать под форму маски (обуви), но обуви все разной формы, а фото цвета единый.

[Suleimanov_Ismar]

Алексей Дубровин, Если сзади картинка цвета, а сверху png обуви, то как удалить лишние части выпирающего цвета?

[Максим]

Suleimanov_Ismar, а где эта прозрачная область ?

[ksnk]

У вас PNG не той системы... Нужно оставить прозрачным только то, что нужно перекрашивать, а не весь белый фон вообще.
Возможно поможет вот это How do I do flood fill on the HTML canvas in JavaScript?

[Suleimanov_Ismar]

Максим, внутри самой обуви

[Suleimanov_Ismar]

ksnk, баляяя точняк, пипец я баран, думал слишком сложным путем а тут все просто. Но решить его по другому тоже было бы хорошо. Спасибо!)))

Answer 1

[Suleimanov_Ismar]

Проблема решена.
Оказалось все проще, закрашиваем те места где будет все статично, оставляем не закрашенным ту часть, где будем динамично подставлять цвета.
Выходит 2 картинки:
1) Цвет
2) Форма

В html, в одном блоке будет отображаться 2 картинки, вторая будет с абсолютным позиционированием, его выравниваем поверх первой картинки и все.

Пример кода html

<div class="pic">
		<img src="color.jpg" class="bg">
		<img src="form.png" class="face">
	</div>

Пример кода Css

.pic img {
    width: 100%;
}

.pic {
    width: 400px;
    position: relative;
    background: white;
}

.pic .face {
    position: absolute;
    left: 0;
    top: 0;
}

Comments

[Максим]

А если таких товаров будет 1000 или 5 тысяч ?
Как в этом случае рисовать?

[Suleimanov_Ismar]

Максим, это будет полная жпа конечно.
Пока другого решения не нашел к сожалению.
Есть ли у вас более практичное и автоматизированное решение?

[Максим]

Suleimanov_Ismar, я начал к комментариях писать...вы переключились на удобный но на единичный случай...
Когда 1 фотка или 5 ..хрен с ним можно нафотошопить...
Берём svg и path нужной области и делаем маску
Ваще такие дела делают на канвас..

[imko]

Так вообще его фоном тогда поставь просто а не отдельным блоком

[Suleimanov_Ismar]

imko, ага, можно в принципе, каждый для себя думаю уже поправит как надо

[Suleimanov_Ismar]

Максим, тут проблема в том что svg должен быть векторной, а приложенное фото, она 50/50 линии векторные а остальное это jpg. Стельки, подошвы и резинки. Svg отрисовать не получается. Посмотрю в сторону канвас. Если у вас будут примеры, буду очень благодарен

[Максим]

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

[Suleimanov_Ismar]

Максим, разве svg может в себе содержать отдельные элементы в виде jpg?

[imko]

Suleimanov_Ismar, свг может в себе содержать отдельные элементы в виде в принципе растра) Попробуй из той же фигмы любой растр экспортировать в свг формате, он его просто обернет в тег свг и внури будет валяться растр