Переместить одно изображение в другое изображение

Фон

Я разрешаю пользователю загружать изображение внутри маски маски....

Как только пользователь загрузит изображение, я заполняю загруженное пользователем изображение внутри изображения маски:

Изображение 1.Mask:

2. пользователь загрузил изображение:

3. Пользователь загрузил изображение на маске [Финальное изображение]:

Codepen: https://codepen.io/kidsdial2/pen/OdyemQ

JSfiddle: http://jsfiddle.net/2xq8p0zy/

Html

<body>
  <img src="http://139.59.24.243/images/invitations/birthday/a.jpg" alt="">
</body>

CSS

body {
  background-color: #111;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

img {
  margin: 20px auto;
  display: block;
  width: 100%;
  height: 500px;
  -webkit-mask-image: url(http://139.59.24.243/images/invitations/birthday/ice.png);
  mask-image: url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/mask-image/mask-image.png);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

Требование:

Я хочу дать возможность переместить загруженное пользователем изображение в изображение маски, как в этой скрипке:

http://jsfiddle.net/aLcb4sb5/ или ссылка

Выпуск:

но сейчас на сайте оба изображения движутся....

Источник

5 ответов

Решение

Я сделал несколько изменений в вашем дизайне. это небольшие изменения в HTML и CSS. Новый HTML-макет выглядит следующим образом

  <div class="image-holder">
  <img src="https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg" alt="">
  </div>

где image-holder div это mask image и изображение внутри него, является user uploaded image

Я сделал демо, посмотрите здесь

Обратите внимание, что для работы draggable вам нужно установить jQuery.ui, и я думаю, что вы уже используете его на своем сайте.

Источник

Вам нужно, чтобы изображение было перетаскиваемым, поэтому сначала нам нужен контейнер для него, чтобы он был обёрткой для прослушивания события перетаскивания и прослушивания события dragstart на самом изображении, поэтому мы можем рассчитать расстояние перетаскивания и применить его как перевод CSS. Пожалуйста, проверьте Следующим пером я раздвоил его и применил изменения. Я добавил прослушивание события onwheel и применил увеличение и уменьшение для изображения и таким же образом.

Я рекомендую вам применить переворот по горизонтали и перевернуть по вертикали и поворот изображения

enter code here

https://codepen.io/anon/pen/yZVPrp

Источник

Пожалуйста, удалите ниже CSS код из .photo_holder img и писать на .photo_holde, Как это:

.photo_holde {
    -webkit-mask-image: url(http://139.59.24.243/images/invitations/birthday/ice.png);
    mask-image: url(http://139.59.24.243/images/invitations/birthday/ice.png);
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
 }
Источник

Проверить эту ссылку, может помочь вам. То, что вы хотите, называется "обтравочная маска". https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing

РЕДАКТИРОВАТЬ: Вот немного магии. Пожалуйста!

Codepen: https://codepen.io/anon/pen/zeZMLz

Источник

Я использовал загруженное изображение в качестве фонового изображения div, затем переместил положение фона в соответствии с перетаскиванием. Начальная позиция установлена ​​на "0px 0px". Написанный на чистом JS, вы, вероятно, можете сократить его, если решите использовать библиотеку JS, которая обрабатывает перетаскивание.

<div id="draggable" draggable="true" style="background-position: 0px 0px;"></div>

Пример здесь

Источник
Другие вопросы по тегам