Переместить одно изображение в другое изображение - PullRequest
Новая
       14

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

0 голосов
/ 25 января 2019

Фон

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

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

1. Изображение маски :

enter image description here

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

enter image description here

3. Загруженное пользователем изображение на маске [Окончательное изображение]:

enter image description here

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 ]

0 голосов
/ 31 января 2019

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

РЕДАКТИРОВАТЬ: Вот немного магии. Не за что!

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

0 голосов
/ 30 января 2019

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

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

enter code here

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

0 голосов
/ 28 января 2019

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

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

Пример здесь

0 голосов
/ 29 января 2019

Удалите приведенный ниже код 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;
 }
0 голосов
/ 28 января 2019

Я сделал несколько изменений в вашем дизайне.это небольшие изменения в 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

. Я сделал демонстрацию, посмотрите здесь

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

...