将 jQuery div 写入图像文件
我有一个 jQuery div，其中图片被拖到类似于 此网站 的位置（玩家被拖到球场上组成一个团队），但是结果如何写入图像文件？ 我认为它使用某种图像库，如 imagemagick，但我不明白它是如何完成的。如果这有什么不同的话，我正在使用 Rails，尽管任何回复都会有帮助。
I have a jQuery div where pictures are dragged into position similar to this site (players are dragged onto a pitch to make a team), but how is the result written to an image file?
I presume it uses some sort of image library like imagemagick but I don't understand how it's done. I'm using rails if that makes a difference, though any replies would be helpful.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
使用 GD2，您可以指定要将图像放置在另一个图像之上的坐标，以及插入文本，然后生成图片，但该过程与用于构建原型的 javascript 无关，您必须收集来自 JavaScript 前端的坐标数据并使用 PHP 或 Ruby 和 GD2 重新创建结果。我对 ImageMagick 不太熟悉，但我认为它可能与 GD2 类似。
http://php.net/manual/en/book.image.php
或者，您可以使用 HTML CANVAS 对象而不仅仅是 DIV，并在浏览器中生成 PNG 文件。
将 HTML Canvas 捕获为 gif/jpg/png/pdf？
With GD2 you can specify the coordinates in wich you want an image positioned on top of another, as well as inserting text and then generate a picture, but the process is not associated with the javascript that you use to build the prototype, you must gather the coordinate data from the javascript frontend and recreate the result with PHP or Ruby and GD2. I'm not familiar with ImageMagick but I think it's probably similar to GD2.
http://php.net/manual/en/book.image.php
Alternatively, you can use the HTML CANVAS object instead of just DIVs, and generate a PNG file just in the browser.
Capture HTML Canvas as gif/jpg/png/pdf?
在这种情况下，顶部 div 包含背景图像以及可以将名称拖动到的位置（请参阅拖放 api）。
准备好字段后，您可以获得应放置在字段上的每个图像的列表。将它们的坐标上传到服务器并根据此信息生成图像文件。
您可以使用 imagemagick compose 方法从子图像合成图像。请参阅 ATop：http://www.imagemagick.org/Usage/compose/#atop
In that case, there's a top div that contains the background image and to where names can be dragged (see the drag and drop api).
Once you have the field ready, you can obtain a list of each image that should be put on the field. Upload their coordinates to the server and generate an image file from this info.
You can use imagemagick compose methods to compose an image from sub-images. See ATop: http://www.imagemagick.org/Usage/compose/#atop