31.9K ·GitHub
Что это такое?
html2canvas — это JavaScript-библиотека, которая делает «скриншоты» веб-страниц или их отдельных частей прямо в браузере пользователя, без необходимости в сервере.
html2canvas — это JavaScript-библиотека, которая делает «скриншоты» веб-страниц или их отдельных частей прямо в браузере пользователя, без необходимости в сервере.Это настоящий скриншот или что-то другое?Нет, это не настоящий снимок экрана. Библиотека читает DOM и CSS-стили, применённые к элементам, и заново собирает страницу в виде изображения canvas, поэтому визуально результат может быть не на все 100% точным.
Нет, это не настоящий снимок экрана. Библиотека читает DOM и CSS-стили, применённые к элементам, и заново собирает страницу в виде изображения canvas, поэтому визуально результат может быть не на все 100% точным.Как её использовать в моём проекте?Подключите html2canvas и вызовите html2canvas(element, options). Функция возвращает Promise, который разрешается в canvas. Его можно добавить на страницу, например: html2canvas(document.body).then(canvas => document.body.appendChild(canvas)).
Подключите html2canvas и вызовите html2canvas(element, options). Функция возвращает Promise, который разрешается в canvas. Его можно добавить на страницу, например: html2canvas(document.body).then(canvas => document.body.appendChild(canvas)).Нужно ли что-то ещё, например полифилл для Promise?Библиотека рассчитывает, что Promise доступен глобально. Для старых браузеров без нативной поддержки Promise нужно подключить полифилл, например es6-promise, до загрузки html2canvas.
Библиотека рассчитывает, что Promise доступен глобально. Для старых браузеров без нативной поддержки Promise нужно подключить полифилл, например es6-promise, до загрузки html2canvas.Есть ли подводные камни, например с контентом с другого источника или с поддержкой Node.js?Библиотека сильно зависит от браузера, поэтому не может работать в Node.js. Она также не может обходить политики безопасности браузера, поэтому для отрисовки контента с другого источника (cross-origin) нужен прокси, который отдаёт его с того же источника. Автор также называет библиотеку экспериментальной и пока не рекомендует использовать её в продакшене.
Библиотека сильно зависит от браузера, поэтому не может работать в Node.js. Она также не может обходить политики безопасности браузера, поэтому для отрисовки контента с другого источника (cross-origin) нужен прокси, который отдаёт его с того же источника. Автор также называет библиотеку экспериментальной и пока не рекомендует использовать её в продакшене.Какие браузеры она поддерживает?Работает в Firefox 3.5+, Chrome, Opera 12+, IE9+ и Safari 6+ (с полифиллом для Promise), так как каждое поддерживаемое CSS-свойство приходится реализовывать вручную.
Работает в Firefox 3.5+, Chrome, Opera 12+, IE9+ и Safari 6+ (с полифиллом для Promise), так как каждое поддерживаемое CSS-свойство приходится реализовывать вручную.Почему она не может просто сделать снимок реальных пикселей страницы?Поскольку библиотека работает полностью в браузере, без рендеринга на стороне сервера, ей приходится заново воссоздавать внешний вид страницы, читая DOM и CSS. Поэтому пока поддерживаются не все CSS-свойства.
Поскольку библиотека работает полностью в браузере, без рендеринга на стороне сервера, ей приходится заново воссоздавать внешний вид страницы, читая DOM и CSS. Поэтому пока поддерживаются не все CSS-свойства.Полностью ли поддерживается CSS?Нет, каждое CSS-свойство нужно реализовывать вручную, поэтому ряд CSS-свойств пока не обрабатывается.
Нет, каждое CSS-свойство нужно реализовывать вручную, поэтому ряд CSS-свойств пока не обрабатывается.What are similar projects?dom-to-image, pixijs, pretext, virtual-dom, anime, react-three-fiber, million, paper.js
dom-to-image, pixijs, pretext, virtual-dom, anime, react-three-fiber, million, paper.js