将一个图像移动到另一个图像中

Question

背景

我允许用户上传蒙版图片中的图片....

用户上传图片后，我在 mask 图片中填充 user uploaded image :

1.Mask 图片 :

2.user 上传图片 :

3.用户在面具上上传的图像 [最终图像]：

密码本：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;
}

要求：

我想提供一个选项 将用户上传的图像移动到蒙版图像中 如此 fiddle :

http://jsfiddle.net/aLcb4sb5/ or 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

我做了个demo看看here

请注意，要使 draggable 工作，您需要安装 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

您需要图片可以拖动，这样首先我们需要一个容器作为包装器来监听 dragover 事件并监听图像本身的 dragstart 事件因此我们能够计算拖动距离并将其应用为 css 翻译请检查我从你那里分叉的以下笔并应用更改我添加了监听 onwheel 事件并以相同的方式对图像应用放大和缩小

我建议你应用水平翻转和垂直翻转以及图像旋转

enter code here

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

Answer 5

查看此 link，可能会对您有所帮助。你想要的是一个"Clipping Mask"。 https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing#Clipping_paths

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

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

将一个图像移动到另一个图像中

Move one image inside other image

html

css

css-mask