寫一個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