Динамическое создание изображений

Question

Возможно ли преобразовать некоторую часть веб-страницы в изображение. Допустим, у меня есть div, который содержит текст и изображение внутри. Я хочу сохранить весь этот div как изображение на стороне сервера, чтобы я мог использовать это изображение в следующий раз.

Не могли бы вы дать мне знать, есть ли расширение jquery плагин / php, которое делает это. Я только что узнал это http://www.visionmasterdesigns.com/tutorial-convert-text-into-transparent-png-image-using-php/

но это просто преобразование текста в png. Но я хочу преобразовать в изображение.

Заранее спасибо.

С уважением, ~ Шафи

Answer 1

Вы можете использовать движок браузера, отображающий страницу в виде изображения, а затем вырезать запрошенный раздел страницы.

Я не знаю, есть ли расширение jquery или php, которое делает это за вас, но вы можете использовать вызов exec и использовать, например, CutyCapt для рендеринга страницы и расширение обработки изображений обрезать его. Я не тестировал программное обеспечение сам, но это начало.

Answer 2

"У меня есть образец div, который предоставляется пользователю для его изменения. Он вмещает два изображения и некоторый текст. Он может выбрать изображение из многих, которые мы предлагаем. Наконец, я хочу сохранить его как одно большое изображение. «

В этом случае захват экрана на стороне клиента является неправильным способом. Вы должны разрешить компоновку изображения в браузере пользователя (как кажется, вы сделали эту часть), но затем браузер должен отправить информацию, необходимую для воссоздания изображения * на сервере, что вы затем делаете с GD, ImageMagick или что-то подобное. Это будет проще, чище и быстрее во многих отношениях:)

* например:

• imageid: 7
• текст: "бла"
• textcolour: # ffffff
• Размер текста: 3
• textx: 10
• текст: 10

РЕДАКТИРОВАТЬ: Вероятно, вы также должны поставить в вопрос процитированную часть, так как это не совсем понятно из исходного поста.

Answer 3

Что именно вы пытаетесь достичь, делая это?

Заголовки изображений в стиле LOLcat? Я бы использовал Gd2 и изменил бы изображение напрямую.

Упрощенный макет веб-страницы? Вероятно, быстрее кешировать исходный код div. Я бы также посоветовал создать несколько вручную и сравнить итоговые размеры передачи файлов. Держу пари, что почти во всех случаях (исходный HTML + изображение) меньше, чем (полученное изображение).

Answer 4

Если вы решили сделать изображение, вы должны

1. вызовите автономный веб-браузер или
2. встроить (X) движок рендеринга HTML или
3. ограничить параметры ввода так, что вы можете написать (очень упрощенный) пользовательский рендер, или
4. делегировать работу внешнему сервису

Все это зависит от операционной системы сервера, от того, какое программное обеспечение на нем доступно, и от того, какой доступ у вас есть.

1. в Windows: вызвать IE с помощью автоматизации COM; в Linux: см http://www.chimeric.de/blog/2007/1018_automated_screenshots_using_bash_firefox_and_imagemagick

2. в Windows: см. http://msdn.microsoft.com/en-us/library/system.windows.forms.webbrowser.aspx; в Linux см. http://webkit.org/building/build.html или http://khtml2png.sourceforge.net/ Вы также можете рассмотреть привязки PHP-Qt или PHP-GTK.

Надеюсь, это поможет.

Answer 5

Определенно не делайте этого на клиенте, даже если бы был способ сделать это (элемент js и canvas), вы должны были бы поверить клиенту (и спаммеры могли бы использовать его, чтобы показывать вам рекламу вместо ваших частичных скриншотов) ), зависит от шрифтов клиента, настроек цвета и т. д.

Правильный способ сделать это - на сервере, либо вызвать браузер командной строки come, программно получить скриншот и закрыть его (но это будет очень сложно реализовать, облагать налогом сервер и что происходит например, когда вы очищаете кеш на популярном сайте, все может быть сразу перерисовано, и вы пытаетесь разместить более 100 экземпляров браузера в ОЗУ ...).

Я бы:

1. Подумайте, действительно ли мне нужно сделать это таким образом, и есть ли лучшее решение исходной проблемы (вам нужно преобразовать части сайта в изображения, для чего именно? Кэширование этой части html поможет? Или Iframe? ?)
2. Если да, сделайте это с поддерживаемыми PHP графическими библиотеками, такими как GD, вам придется составлять чертеж самостоятельно, возможно, есть некоторые библиотеки, которые позволят сделать это на более высоком уровне (вместо этого заполняя область макета текстом) ручного разбиения строки на строку и т. д.)

Answer 6

Вы можете изучить возможность использования одной из услуг, которая делает это. Большинство из них делают эскизы в соответствии с тем, что вкусно использует. Но http://www.webshotspro.com/ выглядит так, как будто он может делать с полным разрешением. Есть ли способ, которым вы можете использовать их API, чтобы получить скриншот, а затем обрезать нужную вам часть? Это действительно зависит от того, что / почему вы заботитесь об этом.

Answer 7

Я почти уверен, что вы не можете сделать это в JavaScript / jQuery. В любом случае, без какого-либо плагина.

Также немного странно хранить текст в виде изображения.