我想知道我怎么能意识到这一点？我想在背景中有一个更大的图像，并且能够将一个较小的图像拖放到我想要在更大图像上的位置并最终保存它，这样它就变成了一个。
javascript和html5可以做到这一点吗？
感谢任何想法！
谢谢
问问题
3062 次
2 回答
3
对于拖放部分，您可以将一个图像放在另一个图像的顶部并给它一些 alpha 值以使其半透明：
#dragme {
opacity:0.4;
}
您可以使用 jquery-ui 进行的拖放操作：
$("#dragme").draggable();
试试看：
http://jsfiddle.net/bjelline/k3vaX/
如果您想实际合并两个图像以创建一个新图像，请使用图像处理库，例如 pixatastic http://www.pixastic.com/lib/docs/actions/blend/
于 2013-05-20T06:49:54.043 回答
3
是的，当您的图像就位时：
- 创建一个背景图像大小的画布元素
- 把你的背景图片画进去
- 遍历您的图像并记录位置
- 使用您记录的 Canvas 的 context.drawImage(image, posX, posY) 绘制每个图像
- 使用 canvas.toDataUrl() 从 Canvas 中提取最终图像
数据 url 可以在背景图像上设置为 src，或者您可以将其直接上传到服务器等。将其设置为图像允许您右键单击它并使用另存为。
如果您最初将画布用作“背景”图像（覆盖窗口） - 您只需使用所需的背景图像对其进行初始化，然后从上面的第三点继续。
于 2013-05-20T06:53:10.137 回答