13

背景

我允许用户在掩码图像中上传图像....

用户上传图像后，我将在掩码图像中填充用户上传的图像：

1.面具图像：

在此处输入图像描述

2.用户上传图片：

在此处输入图像描述

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;
}

要求：

我想提供一个选项，将用户上传的图像移动到掩码图像中，如下面的小提琴：

http://jsfiddle.net/aLcb4sb5/或 链接

问题：

但目前在网站上，这两个图像都在移动....

4

5 回答 5

6

我对你的设计做了一些改动。它是对 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-holderdiv 是 ，其中mask image的图像是user uploaded image

我做了一个演示看看这里

请注意，您需要安装 jQuery.ui 才能使用可拖动的功能，并且我认为您已经在您的站点中使用了它。

于 2019-01-28T07:32:32.540 回答
2

请从下面的 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;
 }
于 2019-01-29T05:51:36.177 回答
1

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

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

enter code here

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

于 2019-01-30T12:33:37.890 回答
1

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

编辑：这里有一些魔法。别客气！

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

于 2019-01-31T19:24:52.780 回答
1

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

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

这里的例子

于 2019-01-28T08:47:30.267 回答