Как наложить одно изображение на другое по маске?

Question

[dk-web]

Прошу прощение за кривой вопрос.
Суть в следующем - есть изображение произвольной формы - png файл с прозрачным фоном и контурами.
Я заливаю файл на сервер и с помощью backgoround style делаю "заливку".

<img src="/images/10.png" style="background: url('/images/{{ Session::get('path') }}') no-repeat center center / contain">

или

<img src="/images/10.png" style="background: center / auto auto no-repeat, #eee 35% url('/images/{{ Session::get('path') }}')">

Но изображение либо встает криво, если пытаться его вписать полностью, либо соответственно размывается.

Может есть какая умная библиотека на js для такого?
В идеале мне бы хотелось как автоматом залить фон, так и просто взять и подогнать изображение а-ля resize под нужный контур.

Например, нарисована звезда. Я загружаю произвольную фотографию. И когда я ее перемещаю поверх звезды, то у меня остается только звезда, заполненная фоном из данной фотографии.

Простите за косноязычность)

Answer 1

[Stalker_RED]

кликай по коту


Возможно я неправильно понял твой вопрос, и ты хочшь что-то вроде
background-size: cover или contain

Или так?

Comments

[dk-web]

Stalker_RED
Уже несколько часов смотрю fabric.js konva.js -
спасибо за совет. очень близко, но что-то не сходится... немного наоборот нужно.
https://jsfiddle.net/8j91mp4z/4/
вот сделал для примера экран телефона - это вроде как контур. А кота-) надо поместить в экран (да простят меня ..-)
contain и cover не всегда справляются как я писал... мне бы хотелось, чтоб я изображение (в данном случае кота) мог растягивать, повернуть, перетаскивать. Но чтобы изображение ограничивалось границами экрана телефона.

Как-то так в ночи заморочился(

[Stalker_RED]

dk-web, дык вообще легкотня.
Добавил пример.

растягивать, повернуть, перетаскивать

Я там подключил draggable, он только перетаскивать умеет. Для растягивания и повторотов придется подобрать что-то получше, или самому написать.