logo标签列表

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

htmlcsscss-mask
13

背景

我允许用户在蒙版图片中上传一个图像....

一旦用户上传了图像，我会将用户上传的图像填充到蒙版图像中：

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>

层叠样式表

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

需求:

我希望提供一个选项，让用户可以在遮罩图像内移动上传的图像，如这个 示例 或者 链接 中所示。

问题 :

但是目前在网站上，两张图片都在移动...

使用jQuery库可以吗？ - Alen.Toma
@Alen.Toma 当然可以，我们可以使用它..... - user8444404
希望这可以帮到你：http://usefulangle.com/post/1/jquery-dragging-image-within-div - Akash Preet
@AkashPreet 感谢你提供的链接，我尝试了链接中的代码，但它没有起作用: http://jsfiddle.net/2Lp14hke/，我正在尝试的是将上传的图像移动到类似于[此链接](https://www.greetingsisland.com/design/invitations/surrealism-balloons/201-14150)中的蒙版图像内。 - user8444404
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-holder div 是 遮罩图片，它里面的图片是 用户上传的图片

我做了一个演示，请看 这里

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

谢谢，它在fiddle中运行良好，我一定会接受你的答案，但是当我在网站上尝试你的代码时，它没有工作，我做错了什么？ - user8444404
你的意思是它不工作了吗？它在你的网站上吗？ - Alen.Toma
在此链接中（http://139.59.24.243/ecom1/site/six/www.greetingsisland.com/design/invitations/floral-unicorn-photo/201-17095.html#），上传的图片与fiddle相比无法自由移动......请检查我做错了什么？ - user8444404
你没有移除它。像这样调试，点击Chrome上的F12，然后通过检查选择图像。然后尝试拖动图像。你会看到在CSS侧边栏中transform: matrix(1, 0, 0, 1, 0, -20);正在改变，然后有一个可拖动事件，你必须在上传之后而不是之前绑定它 $(".image-holder").find("img").draggable();。当页面加载时，你正在绑定它，但此时还没有任何图像。当你上传完图片后，再绑定滑块和可拖动事件。 - Alen.Toma
你在代码末尾的触发器会在页面首次加载时触发。当页面首次加载时，用户还没有添加任何图像，因此您的函数在页面末尾不执行任何操作。'transform: matrix(1, 0, 0, 1, 0, -20);' 可以在您上传的图像的 CSS 样式部分找到。我无法查看 JS 文件，因为它已经被捆绑了。请将应用程序设置为调试模式，这样我就可以查看 JS 文件并查找上传位置（如果我能找到，我可能会更好地帮助您编辑代码）。 - Alen.Toma
显示剩余6条评论
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;
 }
我将你的代码添加到了.photo_holder中，这是网站链接，上传的图像在遮罩图像内移动，但不是很清晰... - user8444404
你在寻找图片调整尺寸和旋转的功能吗？ - Joykal Infotech
不，我无法在网站上像在codepen中那样平滑地移动上传的图片。请在这两个网站上都上传图片，你会发现在codepen中可以清晰地拖动图片，但在网站上却受到限制...... - user8444404
你是否尝试过将JS代码与网站上的代码窗格相同？ - Joykal Infotech
让我们在聊天中继续这个讨论：https://chat.stackoverflow.com/rooms/187466/discussion-between-vickey-colors-and-joykal-infotech - user8444404
1
好的，我一直在担心遮罩问题，我认为我们可以通过剪裁来解决这个问题？ - user8444404
我的意思是白色部分内部。外部应该用另一种颜色替换，比如白色或其他颜色，这样看起来很漂亮，呵呵！ - Chris
只需制作一个剪贴蒙版。将内部设为透明将使背后的图像可见，就像 PNG 图像一样。 - Chris
让我们在聊天中继续这个讨论。 - user8444404
感谢您的时间，我跟随答案中的codepen并使用其他图像进行更新- 我得到了这个结果：https://codepen.io/anon/pen/qgjXqo 这里显示了遮罩图像和其他图像，我还尝试了您上传到Google Drive的代码，我得到了这个结果：https://codepen.io/anon/pen/ZwyJKe ，这里无法将上传的图像拖动到遮罩图像内..... - user8444404
显示剩余5条评论
1
我将上传的图像用作div的背景图像，然后根据移动拖动移动背景位置。初始位置设置为“0px 0px”。 使用纯JS编写，如果选择使用处理拖动的JS库，则可能可以使其更短。
<div id="draggable" draggable="true" style="background-position: 0px 0px;"></div>

这里是示例

当您将图像拖到底部时，您期望发生什么？如果有帮助的话，您可以删除 background-size: cover;，这样图像就会以全尺寸显示。在您提供的示例中也是如此... - Itay Gal
遮罩图像应该固定，当我移动上传的图像时不应该隐藏，就像这样：http://prntscr.com/md5df0 我已经删除了 background-size:cover，但结果仍然相同..... - user8444404
你正在对图像进行一些处理，与我的代码无关。当用户转到下一页时，您可能需要仅应用此处理。 - Itay Gal
我们并不使用其他页面，你的代码运行良好，可以让图片像这个网站一样稍微移动一下，但是不像这个链接那样流畅。 - user8444404
尽管我很想帮忙，但你的问题太过宽泛了，你需要创建一个示例代码来说明你正在尝试做什么，并描述你遇到的错误或困难。我建议你在另一个问题中这样做，因为这个问题已经得到了答案（实际上你甚至有两个解决方案可供选择）。 - Itay Gal
显示剩余4条评论
1
你需要使图片可拖动，因此我们首先需要一个容器来包装它，以便监听dragover事件，并在图像本身上监听dragstart事件，从而能够计算拖动距离并将其应用为CSS翻译。请查看以下pen，我已经从您的forked中应用了更改。我还添加了监听onwheel事件并对图像进行缩放，以同样的方式进行操作。
我建议您应用水平翻转、垂直翻转和图像旋转。
enter code here

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

可以，只需要进行一些修改，我已经在这个分支上完成了。 https://codepen.io/anon/pen/yZVPrp - Mina paulis
感谢您进行了更新，我已经为您的codepen添加了背景颜色: white;，这是更新后的笔：https://codepen.io/anon/pen/aXBqRw，我在[网站]（http://139.59.24.243/ecom1/site/20/www.greetingsisland.com/design/invitations/floral-unicorn-photo /201-17095.html）上试用了代码，我能够移动“上传的图像”到“遮罩图像”中，但与codepen相比不是那么流畅.....您能否请检查一下网站并上传图片一次。 - user8444404
网站中有一段代码 <img style="width: auto; height: 100%; transform: matrix(1, 0, 0, 1, -13, -20); backface-visibility: hidden; transform-origin: 50% 50% 0px; cursor: move; transition: none 0s ease 0s;">，可能会与您的代码冲突。这段代码来自于此文件，但我不知道需要删除该文件中的哪些代码才能使您的代码正常工作...... - user8444404
在您的代码中，图像尚未上传，因此请删除以下行： const img = document.querySelector('#uploadedImg img'); 并更新函数updateStyle如下： function updateStyle() { let transform = "translate(" +translateX+ "px, "+ translateY + "px) scale("+scale+")"; if(document.querySelector('#uploadedImg img'))document.querySelector('#uploadedImg img').style.transform = transform; } - Mina paulis
我已经在网站中更新了您的代码，现在可以通过鼠标滚动条来放大和缩小图片，但是我无法清晰地拖动上传的图片.....请检查一下。 - user8444404
显示剩余2条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接