Запись JQuery Div в файл изображения

Question

У меня есть div jQuery, где изображения перетаскиваются в положение, подобное на этом сайте (игроков перетаскивают на поле, чтобы создать команду), но как результат записывается в файл изображения?Я предполагаю, что он использует какую-то библиотеку изображений, такую ​​как imagemagick, но я не понимаю, как это делается.Я использую рельсы, если это имеет значение, хотя любые ответы будут полезны.

Answer 1

В этом случае есть верхний элемент div, который содержит фоновое изображение и куда можно перетаскивать имена (см. Api перетаскивания).

Как только у вас будет готово поле, вы можете получить список каждого изображения, которое должно быть помещено в поле. Загрузите их координаты на сервер и сгенерируйте файл изображения из этой информации.

Вы можете использовать imagemagick compose методы для создания изображения из подизображений. См. ATop: http://www.imagemagick.org/Usage/compose/#atop

Answer 2

С помощью GD2 вы можете указать координаты, в которых вы хотите, чтобы изображение располагалось поверх другого, а также вставить текст, а затем сгенерировать изображение, но этот процесс не связан с JavaScript, который вы используете для создания прототипа,Вы должны собрать данные координат из внешнего интерфейса javascript и воссоздать результат с помощью PHP или Ruby и GD2.Я не знаком с ImageMagick, но думаю, что он, вероятно, похож на GD2.

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

В качестве альтернативы, вы можете использовать объект HTML CANVAS вместо просто DIV и генерировать файл PNGпросто в браузере.

Захват HTML-холста в формате gif / jpg / png / pdf?