OSCHINA-MIRROR/mirrors-html2canvas

HTML2Canvas

JavaScript HTML рендерер

Скрипт позволяет делать «скриншоты» веб-страниц или их частей прямо в браузере пользователя. Скриншот основан на DOM и, как таковой, может не быть на 100% точным представлением реального изображения, поскольку он не делает настоящий скриншот, а создаёт его на основе информации, доступной на странице.

Как это работает?

Скрипт отображает текущую страницу в виде изображения на холсте, читая DOM и различные стили, применяемые к элементам.

Он не требует рендеринга с сервера, так как всё изображение создаётся в браузере клиента. Однако, поскольку скрипт сильно зависит от браузера, эту библиотеку не рекомендуется использовать в nodejs. Также она не волшебным образом обходит ограничения политики содержимого браузера, поэтому для отображения междоменного контента потребуется прокси, чтобы получить контент из того же источника (http://en.wikipedia.org/wiki/Same_origin_policy).

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

Совместимость с браузерами

Библиотека должна хорошо работать в следующих браузерах (с полифиллом Promise):

Firefox 3.5+
Google Chrome
Opera 12+
IE9+
Safari 6+

Поскольку каждое свойство CSS должно быть вручную реализовано для поддержки, существует ряд свойств, которые пока не поддерживаются.

Использование

Библиотека html2canvas использует Promise и ожидает, что они будут доступны в глобальном контексте. Если вы хотите поддерживать старые браузеры, которые изначально не поддерживают Promise, пожалуйста, включите полифилл, такой как es6-promise, перед включением html2canvas.

Чтобы отобразить элемент с помощью html2canvas, просто вызовите: html2canvas(element[, options]);

Функция возвращает Promise, содержащий элемент <canvas>. Просто добавьте обработчик выполнения обещания к обещанию, используя then:

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

Сборка

Вы можете скачать готовые сборки здесь.

Клонируйте репозиторий git:

$ git clone git://github.com/niklasvh/html2canvas.git

Установите зависимости:

$ npm install

Создайте пакет для браузера

$ npm run build

Примеры

Для получения дополнительной информации и примеров посетите домашнюю страницу или попробуйте тестовую консоль.

Вклад

Если вы хотите внести свой вклад в проект, отправьте запросы на вытягивание в ветку разработки. Прежде чем отправлять какие-либо изменения, попробуйте и проверьте, работают ли изменения со всеми поддерживаемыми браузерами. Если какое-то свойство CSS не поддерживается или является неполным, создайте соответствующие тесты для него, прежде чем вносить какие-либо изменения кода.