Javascript 将一个图像拖到另一个图像上，并将其保存到一个图像（如灯光增强现实）

我想知道我怎么能意识到这一点？我希望在背景中有一个较大的图像，能够将较小的图像拖放到较大图像上我想要的位置，并最终保存它，使其成为一个

javascript和html5是否可以做到这一点

感谢你的任何想法

---

感谢拖放部分，您只需将一个图像放置在另一个图像的顶部，并给它一些alpha值以使其半透明：

#dragme {
    opacity:0.4;
}

使用jquery ui可以执行的拖放操作：

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

请在以下网址试用：

如果您希望实际合并两个图像以创建新的

---

当您将图像放置到位时，可以使用图像处理库，如pixatastic

是：

• 创建背景图像大小的画布元素
• 把你的背景画进去
• 反复浏览图像并记录位置
• 使用您录制的Canvas的context.drawImage（image，posX，posY）绘制每个图像
• 使用Canvas.toDataUrl（）从画布提取最终图像

数据url可以在背景图像上设置为src，也可以直接上传到服务器等。将其设置为图像后，您可以右键单击它并使用“另存为”

---

如果您最初使用画布作为“背景”图像（覆盖窗口）-您只需使用背景中所需的图像对其进行初始化，然后从上面的第三点继续。

感谢您的快速回复。我会试试的，听起来不错！，对不起，我不能给你+1，因为我的名声还不到15岁。我怎样才能将它与pixastic合并？找不到正确的函数：D链接指向“混合”-这不是你想要做的吗？所以我只需要将较小的图像与较大的图像混合，并添加“1”？我猜pixastic正在使用画布来进行此操作？谢谢你的回复！仍然只有11个声誉，所以不能给u+1:（@MarcSter我不熟悉pixastic，但这是使用Javascript直接在HTML5中实现它的唯一“低级”方法，所以我猜是这样。另一个选择是将所有内容发送到服务器并在那里处理（或使用基于Flash的应用程序）。我理解这些说明，但不知道如何将其与正确的代码混合：/你能发布一些上面的说明吗？那太好了！我是javascript的初学者，尤其是在画布方面。现在感觉有点迷茫