将一张图片拖到另一张图片上并保存为一张图片（类似于轻量级增强现实）。

Question

3

我想知道如何实现这个功能？我希望在背景上有一个更大的图像，并能够拖放一个较小的图像到大图像上的任意位置并最终保存，使它们变成一个整体。

使用JavaScript和HTML5可以实现吗？

感谢任何想法！

谢谢

- Marc Ster

2个回答

3

是的，当你已经确定好图片位置后：

可以将数据URL设置为背景图片的src属性，或者直接上传到服务器等。将其设置为图像，则右键单击它并选择“另存为”。

如果你最初使用Canvas作为“背景”图片（覆盖整个窗口），则只需将其初始化为所需的背景图片，然后从第三步继续进行操作。

- user1693593

我猜Pixastic是使用画布来完成这个，对吗？谢谢回复！我只有11点声望，所以不能给你+1 :( - Marc Ster

@MarcSter 我不熟悉pixastic，但这是在HTML5中直接使用JavaScript进行此操作的唯一“低级”方法，所以我会猜测如此。另一个选项是将所有内容发送到服务器并在那里处理它（或使用基于Flash的应用程序）。 - user1693593

我理解这些指令，但不知道如何与正确的代码混合:/ 你能发布一个上述指令的fiddle吗？那太好了！我是JavaScript的初学者，特别是在canvas方面..现在感到有点迷失。 - Marc Ster

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bjelli · Accepted Answer

对于拖放部分，您只需将一张图像定位在另一张图像上方，并给它一些透明度，使其半透明：

#dragme {
    opacity:0.4;
}

使用jQuery-UI可以实现的拖放效果：

$("#dragme").draggable();

请访问以下网址进行尝试：

如果您想将两张图片合并成一张新的图片，请使用图像处理库，例如pixatastic http://www.pixastic.com/lib/docs/actions/blend/