Есть ли способ визуализации HTML для изображения, как PNG? Я знаю, что это возможно с холстом, но я хотел бы сделать стандартный элемент HTML, например, div.
Чтобы создать какую-то помощь пользователю, например. К сожалению, это невозможно (по соображениям безопасности?). Вы должны попросить пользователя нажать PrintScreen, чтобы что-то сделать.
Это кажется интересным, но мне не удалось заставить его работать, поэтому я выбрал решение Джона Фишера. Спасибо за информацию, я буду смотреть этот проект в будущем!
Мартин Делиль
@MartinDelille: здесь статья об использовании HTML2Canvas для создания IMAGE, вы также можете скачать ее на стороне клиента codepedia.info/2016/02/…
singh
3
dom-to-image (см. ответ Цайена) делает намного лучшую работу для создания точной картинки.
JBE
3
Это решение очень медленное
hamboy75
3
другая проблема, если элемент скрыт или находится за другим элементом, это не сработает
Yousef
91
Могу я порекомендовать библиотеку dom-to-image , которая была написана исключительно для решения этой проблемы (я сопровождающий).
Вот как вы используете это (еще немного здесь ):
var node = document.getElementById('my-node');
domtoimage.toPng(node).then (function(dataUrl){var img =newImage();
img.src = dataUrl;
document.appendChild(img);}).catch(function(error){
console.error('oops, something went wrong!', error);});
Спасибо! Но что именно вы подразумеваете под «удвоением размера»?
Цайен
2
Первое, что приходит мне в голову - попробуйте визуализировать ваше изображение в SVG (используя domtoimage.toSvg), затем визуализируйте его самостоятельно на холсте и попытайтесь как-то поиграть с разрешением этого холста. Вероятно, возможно реализовать такую функцию, как какую-то опцию рендеринга в самой библиотеке, чтобы вы могли передавать размеры изображения в пикселях. Если вам это нужно, я буду признателен, если вы создадите проблему на github.
Цаен
8
Это НАМНОГО лучше, чем html2canvas. Спасибо.
c.hughes
1
@Subho это строка, содержащая URL с данными в кодировке base64
tsayen
67
Вариантов много, и у всех есть свои плюсы и минусы.
Вариант 1. Используйте одну из множества доступных библиотек.
Спасибо за подробный ответ с множеством возможных решений
bszom
wkhtmltoimage / pdf поддерживает рендеринг JavaScript. Вы можете установить задержку javascript или позволить wkhtml проверять конкретный window.status (который можно установить с помощью javascript, когда вы знаете, что ваши js-файлы выполнены)
Даниэль З.
PhantomJS поддерживает такие динамические вещи, как Google Maps. Это действительно полноценный веб-браузер, просто без прикрепленного дисплея. Однако вам придется немного подождать, пока Google Map загрузит плитки с географией (я жду 500 мс и позволяю людям изменить задержку - если этого недостаточно, снова работает без увеличения времени, потому что эти плитки кэшируются).
Ладислав Зима
50
Все ответы здесь используют сторонние библиотеки, в то время как рендеринг HTML в изображение может быть относительно простым в чистом Javascript. Там будет даже статья об этом в разделе холст на MDN.
Хитрость заключается в следующем:
создайте SVG с узлом foreignObject, содержащим ваш XHTML
установить источник изображения на URL-адрес этого SVG
По соображениям безопасности SVG в качестве URL-адреса данных изображения выступает в качестве изолированной области CSS для HTML, поскольку внешние источники не могут быть загружены. Так, например, шрифт Google должен быть встроен с помощью такого инструмента, как этот .
Даже если HTML-код внутри SVG превышает размер изображения, он будет правильно рисовать на холсте. Но фактическая высота не может быть измерена от этого изображения. Решение с фиксированной высотой будет работать очень хорошо, но динамическая высота потребует немного больше работы. Лучше всего рендерить данные SVG в iframe (для изолированной области CSS) и использовать полученный размер для холста.
Ницца! Удаление зависимости от внешних библиотек - действительно хороший путь. Я изменил свой принятый ответ :-)
Мартин Делиль
Этой статьи больше нет.
MSC
2
Отличный ответ, но комментируя современное состояние HTML и веб-API, которые, как обычно, выглядят как что-то, что вытянуло кого-то позади - технически все функциональные возможности присутствуют, но раскрыты за массивом (без каламбура) странных путей кода, которые напоминают ничего такого, чего бы вы не ожидали от хорошо спроектированных API. Проще говоря: браузер, скорее всего, тривиально разрешает Documentрендеринг а в растр (например, а Canvas), но поскольку никто не удосужился его стандартизировать, мы вынуждены прибегать к безумию, как показано выше (не оскорбляя автора этого код).
атп
1
Этот ответ stackoverflow.com/questions/12637395/…, кажется, указывает, что вы можете пойти довольно далеко. Mozilla и Chrome имеют неограниченное количество данных, и даже текущий IE позволяет использовать 4 ГБ, что сводится к примерно 3 ГБ изображениям (благодаря base64). Но это было бы хорошо, чтобы проверить.
Сеити
3
- некоторые быстрые и грязные тесты позже - jsfiddle.net/Sjeiti/pcwudrmc/75965 Chrome, Edge и Firefox увеличивают ширину не менее чем на 10 000 пикселей, что (в данном случае) - это количество символов около 10 000 000 и размер файла png 8 МБ. Не тестировался строго, но этого достаточно для большинства случаев использования.
Сеити
13
Вы можете использовать PhantomJS , который представляет собой безголовый веб- набор (движок рендеринга в Safari и (до недавнего времени) Chrome) драйвер. Вы можете узнать, как сделать снимок экрана здесь . Надеюсь, это поможет!
Эта техника хорошо работает. Однако с момента вашего комментария прошло 2 года. Вы сталкивались с чем-то, что работает быстрее, чем PhantomJS? Генерация изображения в Phantom обычно занимает 2-5 секунд.
Брайан Вебстер
Безголовый Chrome теперь возможен. Я не знаю, быстрее ли это, но если вам нужны точные скриншоты, это хороший способ.
Джош Мааг
11
Вы можете использовать инструмент HTML to PDF, например wkhtmltopdf. И тогда вы можете использовать PDF для изображения инструмента, как imagemagick. По общему признанию это - сторона сервера и очень запутанный процесс ...
Или вы можете просто запустить изображение брата wkhtmltopdf, wkhtmltoimage.
Роман Старков
1
Эта библиотека для Node.js. Как насчет простого интерфейса?
Влад
9
Единственной библиотекой, которую я получил для работы с Chrome, Firefox и MS Edge, была растеризация HTML . Он выводит лучшее качество, чем HTML2Canvas, и поддерживается в отличие от HTML2Canvas.
Я не ожидаю, что это будет лучший ответ, но он показался достаточно интересным для публикации.
Напишите приложение, которое открывает ваш любимый браузер для нужного HTML-документа, правильно масштабирует окно и делает снимок экрана. Затем удалите границы изображения.
У вас есть быстрая версия выше? или, если возможно, не могли бы вы переписать это?
SSH
Не могли бы вы поделиться кодом, который вы используете для загрузки отображаемого веб-представления? Это выглядит многообещающим подходом для моего рендера. Спасибо!
Дейв
1
Установить фантоми
$ npm install phantomjs
Создайте файл github.js со следующим кодом
var page = require('webpage').create();//viewportSize being the actual size of the headless browser
page.viewportSize ={ width:1024, height:768};
page.open('http://github.com/',function(){
page.render('github.png');
phantom.exit();});
Ответы:
Я знаю, что это довольно старый вопрос, на который уже есть много ответов, но я все еще часами пытался сделать то, что хотел:
Используя Chrome без головы (версия 74.0.3729.157 на этот ответ), это действительно легко:
Объяснение команды:
--headless
запускает Chrome, не открывая его, и завершает работу после завершения команды--screenshot
сделает снимок экрана (обратите внимание, что он генерирует файл с именемscreenshot.png
в папке, в которой выполняется команда)--window-size
разрешить захватывать только часть экрана (формат есть--window-size=width,height
)--default-background-color=0
магический трюк, который говорит Chrome использовать прозрачный фон, а не белый цвет по умолчаниюисточник
--screenshot='absolute\path\of\screenshot.png'
работал для меняДа. HTML2Canvas существует для рендеринга HTML
<canvas>
(который затем можно использовать в качестве изображения).ПРИМЕЧАНИЕ. Существует известная проблема, которая не будет работать с SVG.
источник
Могу я порекомендовать библиотеку dom-to-image , которая была написана исключительно для решения этой проблемы (я сопровождающий).
Вот как вы используете это (еще немного здесь ):
источник
domtoimage.toSvg
), затем визуализируйте его самостоятельно на холсте и попытайтесь как-то поиграть с разрешением этого холста. Вероятно, возможно реализовать такую функцию, как какую-то опцию рендеринга в самой библиотеке, чтобы вы могли передавать размеры изображения в пикселях. Если вам это нужно, я буду признателен, если вы создадите проблему на github.Вариантов много, и у всех есть свои плюсы и минусы.
Вариант 1. Используйте одну из множества доступных библиотек.
Pros
Cons
Вариант 2: используйте PhantomJs и, возможно, библиотеку-обертку
Pros
Cons
Вариант 3: используйте Chrome Headless и, возможно, библиотеку-обертку
Pros
Cons
Вариант 4: использовать API
Pros
Cons
Раскрытие информации: я основатель ApiFlash. Я сделал все возможное, чтобы дать честный и полезный ответ.
источник
Все ответы здесь используют сторонние библиотеки, в то время как рендеринг HTML в изображение может быть относительно простым в чистом Javascript. Там
будетдаже статья об этом в разделе холст на MDN.Хитрость заключается в следующем:
drawImage
на холстНекоторые вещи на заметку
источник
Document
рендеринг а в растр (например, аCanvas
), но поскольку никто не удосужился его стандартизировать, мы вынуждены прибегать к безумию, как показано выше (не оскорбляя автора этого код).Вы можете использовать PhantomJS , который представляет собой безголовый веб- набор (движок рендеринга в Safari и (до недавнего времени) Chrome) драйвер. Вы можете узнать, как сделать снимок экрана здесь . Надеюсь, это поможет!
источник
Вы можете использовать инструмент HTML to PDF, например wkhtmltopdf. И тогда вы можете использовать PDF для изображения инструмента, как imagemagick. По общему признанию это - сторона сервера и очень запутанный процесс ...
источник
Node.js
. Как насчет простого интерфейса?Единственной библиотекой, которую я получил для работы с Chrome, Firefox и MS Edge, была растеризация HTML . Он выводит лучшее качество, чем HTML2Canvas, и поддерживается в отличие от HTML2Canvas.
Получение элемента и загрузка в формате PNG
источник
rasterizeHTML.drawHTML(node.innerHTML, canvas)
обратите внимание, что я вызываю innerHTML на узлеИспользуйте html2canvas, просто включите плагин и метод вызова, чтобы конвертировать HTML в Canvas, а затем скачать как изображение PNG.
Источник : http://www.freakyjolly.com/convert-html-document-into-image-jpg-png-from-canvas/
источник
Я не ожидаю, что это будет лучший ответ, но он показался достаточно интересным для публикации.
Напишите приложение, которое открывает ваш любимый браузер для нужного HTML-документа, правильно масштабирует окно и делает снимок экрана. Затем удалите границы изображения.
источник
Используйте этот код, он обязательно будет работать:
Только не забудьте включить файл Html2CanvasJS в вашу программу. https://html2canvas.hertzen.com/dist/html2canvas.js
источник
Вы не можете сделать это на 100% точно только с помощью JavaScript.
Там есть инструмент Qt Webkit и версия на Python . Если вы хотите сделать это самостоятельно, у меня был успех с Какао:
Надеюсь это поможет!
источник
Установить фантоми
Создайте файл github.js со следующим кодом
Передайте файл в качестве аргумента phantomjs
источник
HtmlToImage.jar будет самым простым способом конвертировать HTML в изображение
Преобразование HTML в изображение с использованием Java
источник
Вы можете добавить ссылку HtmlRenderer в ваш проект и сделать следующее,
источник