Сохранить визуализированный HTML как изображение

Question

Я создаю веб-приложение, которое должно экспортировать div в изображение. Этот div будет содержать изображения, другие div, текст с CSS-стилем и т. Д. В конце у пользователя должно быть изображение, которое будет выглядеть так же, как если бы он сделал скриншот этого div. Я изучил PHP-библиотеки на стороне сервера, но не вижу ничего, что могло бы справиться со сложностью отображаемого HTML. У HTML5 canvas есть такая возможность, но я не могу использовать canvas для своего случая. Есть идеи?

Спасибо!

Answer 1

Оформить html2canvas .Javascript Framework, который отображает содержимое страницы в элементе canvas.

Answer 2

Я написал проект, который преобразует HTML со стилями CSS в canvas.

Он доступен здесь: https://github.com/coolbloke1324/html-to-canvas

А примерная тестовая страница доступна здесь: http://www.isogenicengine.com/html-canvas/test/index.html

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

Answer 3

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

Вот как вы получаете данные пикселей https://developer.mozilla.org/en/html/canvas/pixel_manipulation_with_canvas

А вот что вы использовали бы для создания изображения пиксель за пикселем http://php.net/manual/en/function.imagesetpixel.php