写一个jQuery div到图像文件

Question

我有一个jQuery div，其中图片被拖拽到与this site类似的位置（玩家被拖到球场上制作团队），但结果如何写入图像文件？ 我认为它使用了某种类似imagemagick的图像库，但我不明白它是如何完成的。我使用rails如果有所作为，但任何回复都会有所帮助。

Answer 1

使用GD2，您可以指定想要图像位于另一个顶部的坐标，以及插入文本然后生成图片，但该过程与您用于构建原型的JavaScript无关，您必须从javascript前端收集坐标数据，并使用PHP或Ruby和GD2重新创建结果。我不熟悉ImageMagick，但我认为它可能与GD2类似。

http://php.net/manual/en/book.image.php

或者，你可以使用HTML Canvas对象，而不是仅仅的DIV的，只是在浏览器中生成的PNG文件。

Capture HTML Canvas as gif/jpg/png/pdf?

Answer 2

在这种情况下，有一个顶部的div包含背景图像和这里的名字是可以进行拖动（参见拖放API）。

一旦你准备好了现场，你可以获得应该放在现场的每个图像的列表。将他们的坐标上传到服务器并根据此信息生成图像文件。

您可以使用imagemagick撰写方法从子图像组成图像。见ATop：http://www.imagemagick.org/Usage/compose/#atop