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

Question

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

这可以通过javascript＆amp; HTML5？

欣赏任何想法！

感谢

Answer 1

对于拖放部分，您可以将一个图像放在另一个图像的顶部，然后给它一些alpha值以使其半透明：

#dragme {
    opacity:0.4;
}

你可以使用jquery-ui进行拖放：

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

尝试一下：

http://jsfiddle.net/bjelline/k3vaX/

如果要实际合并两个图像以创建新图像 一个使用图像处理库，如pixatastic http://www.pixastic.com/lib/docs/actions/blend/

Answer 2

是的，当你的图像到位时：

• 创建一个与背景图片大小相同的画布元素
• 将背景图片绘制到其中
• 迭代您的图片并记录位置
• 使用您录制的Canvas'context.drawImage（image，posX，posY）绘制每个图像
• 使用canvas.toDataUrl（）
从Canvas中提取最终图像

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

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