Как сохранить HTML-страницы в виде картинок?
- Перепишите DOM на холст, а затем используйте метод холста toDataURL для вывода DOM в виде URL-адреса данных, содержащего изображение.
- Реализовано с помощью HtmlCanvas2.
- Реализовано с помощью rasterizeHTML.js.
Анализ преимуществ и недостатков:
(1) Метод перезаписи DOM на холст: это эквивалентно полной перезаписи стиля макета всей страницы, что увеличивает рабочую нагрузку. Из-за концепции объекта, которая недоступна в холсте, непросто реконструировать страницы с богатыми элементами и сложными макетами. Перезапись всех элементов DOM на холст создает некоторые трудности. Например: Трудно поддерживать отзывчивость.
(2) Способ использования HtmlCanvas: просто вызовите метод html2canvas и установите элементы конфигурации. Все изображения, используемые сценарием, должны находиться в одном и том же источнике, если на странице есть другие элементы холста, которые были испорчены контентом из разных источников и больше не могут быть прочитаны html2canvas.
(3) Используйте rasterizeHTML.js для достижения: существует много ограничений, в настоящее время поддерживаются только 3 типа целевых форматов, которые можно преобразовать в холст: URL-адрес страницы, строка html и объект документа.
Принцип скриншота скрипта html2canvas
Скрипты позволяют делать скриншоты или части веб-страниц прямо в браузере пользователя. Скриншоты основаны на модели DOM, поэтому они могут быть не на 100 % точными для реального представления, поскольку они не делают фактический снимок экрана, а создают его на основе информации, доступной на странице. На самом деле он не делает скриншот страницы, а строит представление страницы на основе свойств, считанных из DOM. Следовательно, он может правильно описать только те свойства, которые понимает, а это означает, что многие свойства CSS не работают.
Как установить и использовать html2canvas?
Установитьnpm install html2canvas
представлятьimport html2canvas from ‘html2canvas’;
(1) параметры html2canvas
| имя | По умолчанию | описывать |
|---|---|---|
| async | true | Следует ли анализировать и отображать элементы асинхронно |
| allowTaint | false | Разрешить ли загрязнять холст исходным изображением |
| backgroundColor | #ffffff | Цвет фона холста, если он не указан в DOM, установите значение null на прозрачный |
| canvas | null | Существующие элементы холста, используемые в качестве основы для рисования |
| foreignObjectRendering | false | Следует ли использовать ForeignObject для отображения постоянного |
| imageTimeout | 15000 | Тайм-аут для загрузки изображения (в миллисекундах, установите 0, чтобы отключить тайм-аут) |
| ignoreElements | (element)=>false | Функция предиката для удаления совпадающих элементов из рендеринга |
| logging | true | Включить ведение журнала для отладки |
| onclone | Функция обратного вызова, вызываемая при отображении клонированного документа, может использоваться для изменения того, что будет отображаться, не затрагивая исходный исходный документ. | |
| proxy | null | URL-адрес прокси для загрузки изображений из разных источников. Если оставить поле пустым, кросс-оригинальные изображения загружаться не будут. |
| removeContainer | true | Следует ли очищать клонированные элементы DOM, которые html2canvas создаст временно |
| scale | window.devicePixelRatio | Масштаб, используемый для рендеринга, по умолчанию соответствует соотношению пикселей устройства браузера. |
| useCORS | false | Используется для указания, разрешать ли доступ к междоменным изображениям. |
| width | element width | ширина холста |
| height | element height | настройка высоты холста |
| x | element x-offset | обрезать холст x координата |
| y | element y-offset | обрезать холст по координате y |
| scrollX | element scrollX | Позиция x-scroll для использования при рендеринге элемента (например, если элемент использует position: fixed ) |
| scrollY | element scrollY | Позиция прокрутки y для использования при рендеринге элемента (например, если элемент использует position: fixed ) |
| windowWidth | Window.innerWidth | Ширина окна, используемая при рендеринге элемента, это может повлиять на такие вещи, как медиа-запросы. |
| windowHeight | Window.innerHeght | Высота окна, используемая при раскрашивании Element , что может повлиять на такие вещи, как медиа-запросы. |
| taintTest | true | Протестируйте изображение перед рендерингом |
(2) Как использовать html2canvas
- Первый шаг: реализовать первый шаг сохранения в виде изображения: преобразовать html в холст
На основе html2canvas.js элемент может отображаться как холст, а затем объект Promise передаст захваченное изображение в параметр холста.
html2canvas(document.body).then(function(canvas) { document.body.appendChild(canvas); }); - Шаг 2. Преобразование холста в изображение
Холст, сгенерированный на предыдущем шаге, представляет собой объект элемента холста, содержащий целевой элемент. Чтобы достичь цели сохранения изображений, вам нужно всего лишь преобразовать холст в изображение.
Метод toDataURL, основанный на собственном холсте, выводит холст как адрес изображения типа data: URI, а затем назначает адрес изображения дляАтрибута src элемента достаточно.
(3) Оптимизация четкости сгенерированных изображений
- Увеличьте свойства ширины и высоты холста в 2 раза (или задайте для них значение devicePixelRatio раз) и, наконец, установите для стиля CSS ширину и высоту холста в 1 раз больше исходного размера.
Блог woohoo.cn на.com/Regina1123/…
<canvas width="320" height="180" style="width:160px;height:90px;"></canvas> - Изменить процентный макет на макет пикселей
Если ширина и высота элемента изначально были заданы в процентах, измените ширину и высоту в пикселях, чтобы избежать размытия, вызванного вторичным расчетом стилей. - Отключите настройки сглаживания по умолчанию для холста.
По умолчанию сглаживание холста включено, вам нужно отключить сглаживание, чтобы добиться повышения резкости изображения (imageSmoothingEnabled).
blog.CSDN.net/with if AA/Aretti… - Установите ширину и высоту размытого элемента на исходную ширину и высоту материала, а затем масштабируйте его с помощью transform: scale. Значение масштаба здесь определяется конкретными потребностями.
.targetElem {width: 54px;height: 142px;margin-top:2px;margin-left:17px;transform: scale(0.5)}
(4) Установка междоменных картинок
- Конфигурация изображений в CDN
Включите элемент конфигурации USECORS HTML2CANVAS (USECORS: TRUE)
Если элемент конфигурации useCORS html2canvas не включен, html2canvas будет выполняться нормально и не будет сообщать об ошибке, но не будет выводить соответствующее изображение CDN. (Страница, содержащая как изображения CDN, так и локальные ресурсы изображений, была протестирована, но только локальные изображения могут отображаться нормально)