Растеризовать фрагмент HTML в PNG

Question

У меня есть страница с серией div.Каждый элемент представляет слайд в слайде.Мне нужна серия миниатюр, по одному на каждый слайд.В идеале эти миниатюры должны быть растеризованными версиями слайдов: идеальный PNG data: url.Мне бы хотелось, чтобы работа выполнялась в браузере, и я в порядке с вещами, которые работают только в одном из современных браузеров (например, Chrome или Firefox).Я подозреваю, что это невозможно, но хотелось бы услышать иначе.

Метод toDataURL() на объекте canvas - это, по сути, то, что я хочу, но рассматриваемые элементы div не являются экземплярами canvas, так что это не сработает.

Answer 1

Одним из решений может быть рендеринг HTML на холст путем встраивания HTML-кода в изображение SVG в виде <foreignObject> и последующего рисования полученного изображения с помощью ctx.drawImage().

. Прочитайте статью наMDN здесь , или посмотрите на rasterizeHTML.js , который является реализацией указанного подхода.

Ограничения состоят в том, что ваш контент должен быть чистым с одинаковым происхождением (то есть доступным).от AJAX).

Отказ от ответственности: я являюсь автором rasterizeHTML.js.

Answer 2

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

Хотя ...

• можно скопировать весь HTML-код, чтобы использовать его в качестве предварительного просмотра большого пальца / любого другого и использовать преобразования CSS3 (масштабирование) + добавить наложение поверх него, чтобы предотвратить взаимодействие / выделение текста и т. Д., Чтобы имитировать миниатюру элемента Div.

• и в расширениях Firefox / Chrome была возможность сохранить страницу в изображение - хотя и не был уверен, можно ли взять в качестве изображения только часть страницы

• или вы всегда можете сделать то же, что делает Google на своей странице результатов поиска с предварительным просмотром страницы (нажмите на увеличительную линзу рядом с заголовком результата) - получите роботизированную машину, которая войдет на страницу и сделает снимок экрана, чтобы произвести предварительный просмотр страницы с использованием этих данных - не знаю, сколько вы ХОТИТЕ сделать это, но если вы хотите, чтобы это так плохо ...:)

Боюсь, что нет простого способа сделать то, что вы хотите, а CSS3-трюк кажется одним из самых простых.

Answer 3

вы можете растеризовать html в элемент <canvas> в javascript с помощью библиотеки rasterizeHTML: http://cburgmer.github.io/rasterizeHTML.js/