Question

背景

我允许用户在蒙版图像中上传图像。...

用户上传图片后，我会在蒙版图片内填充用户上传图片：

1。蒙版图像：

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/或link

问题：

但是目前website中的两个图像都在移动。...

Answer 1

我对您的设计进行了一些更改。这是对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

我做了一个演示，here

要进行拖放操作，请注意，您需要安装jQuery.ui，并且我认为您已经在网站中使用它了。

Answer 2

我将上传的图像用作div的背景图像，然后根据移动拖动来移动背景位置。初始位置设置为“ 0px 0px”。用纯JS编写，如果选择使用处理拖动的JS库，则可能会使其更短。

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

Example here

Answer 3

请从.photo_holder img删除下面的CSS代码，然后在.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;
 }

Answer 4

您需要图片可拖动，以便首先，我们需要一个容器来包装它以监听拖动事件并听图像上的dragstart事件因此我们能够计算出拖动距离并将其应用为css转换请检查以下是我从您的笔中分叉的笔，并同时应用更改我添加了监听车轮事件并以相同方式应用图像的放大和缩小

我建议您应用水平翻转，垂直翻转和图像旋转

enter code here

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

Answer 5

查看此链接，可能会对您有所帮助。您想要的被称为“剪贴蒙版”。 https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing#Clipping_paths

编辑：这是一些魔术。不客气！

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

将一张图片移到另一张图片内

5 个答案: