Сохранить HTML-холст как изображение без браузера клиента

Question

Я создаю изображение на нескольких перекрывающихся холстах при загрузке страницы (без взаимодействия с пользователем), но для полного рисования требуется ~ 3 секунды. Я хочу сгладить эти холсты и преобразовать это изображение в PNG на сервере, для использования в предварительном просмотре миниатюр.

Сглаживание на один холст (с использованием ctx.drawImage (other_canvas, 0,0)), а затем ctx.toDataUrl() выглядит точно так, как мне нужно. Есть ли способ сделать это на стороне сервера без необходимости просмотра обозревателя? Возможно, что-то вроде анализатора javascript/canvas в командной строке, который может загружать страницу, дождаться, пока холст закончит рендеринг, затем добавьте некоторый javascript, чтобы сгладить, вызвать toDataUrl, изменить размер и сохранить полученный образ.

Решения AJAX, которые визуализируют и отправляют эскиз обратно на сервер, не будут работать, так как мне нужен эскиз, прежде чем первый человек просмотрит страницу. Он также должен быть быстрым (надеюсь, только немного дольше, чем время, которое холст берет для рендеринга, 3 секунды). Я не могу дождаться внешней службы, такой как браузеры.

Я посмотрел на CutyCapt, но это делает всю веб-страницу, а не только холст (а также по какой-то причине не рисует все на моем холсте).

Спасибо.

Answer 1

Вы можете взглянуть на Phantomjs: https://github.com/ariya/phantomjs/wiki/Screen-Capture

Это делает хорошую работу по оказанию содержимого HTML в виде PNG, хотя это также будет делать всю страницу. Возможно, вы можете обернуть содержимое холста, которое вас интересует, на отдельной странице, а затем использовать phantomjs, чтобы превратить его в png.

Answer 2

PHP имеет various libraries для создания серверных образов, которые предлагают функциональность, похожую на холст HTML5.

Answer 3

Посмотрите на PhantomJS, который представляет собой версию командной строки браузера webkit, и вы можете делать такие классные вещи, как сохранение вывода отображаемой страницы на изображении и т. Д. AFAIK вы также можете ввести код javascript, который может дать вам больше контроля когда нужно сделать снимок экрана.

http://phantomjs.org/