将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 compose方法从子图像合成图像。见ATop：http://www.imagemagick.org/Usage/compose/#atop