В последнее время, чтобы решить общую аномальную информационную запись, проект изучил полную функцию экрана экрана в браузере, чтобы пользователи могли быстро экранировать и отправлять их администратору, когда они находят нарушения. Конечная информация, записанная в последней записи, заключается в следующем.
Введение в HTML2CanvasВ прошлом мы могли перехватывать изображения только через другие инструменты экрана. Функция современных браузеров стала сильнее и сильнее. HTML2Canvas -это такая передняя плавка -в -внедорожник, и его принцип -нарисовать узел DOM на холсте. Хотя это удобно, есть следующий предел:
Поскольку мой сценарий использования прост, он также определяется мной, а ненормальная страница также определяется мной, тогда достаточно html2canvas.
Используйте экземплярЦитата jQuery, HTML2Canvas можно использовать, а код прост. Я использую версию HTML2Canvas 0.5.0 здесь
Html2canvas (#tbl_except), {onrendered: function (canvas) {var url = canvas.todataurl (); pngto (body);Первый параметр - это объект DOM для скриншота, а второй параметр отображается после холста восстановления.
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
| Allowtaint | Логический | ЛОЖЬ | Разрешить ли кроссоригиновые изображения испортить холст |
| фон | нить | #fff | Цвет фона холста, если ни один не вырос в DOM. |
| высота | число | нулевой | Определите Heigt о холсте в пикселях. |
| Письмордеринг | Логический | ЛОЖЬ | Столкнуть каждую букву отдельно. |
| регистрация | Логический | ЛОЖЬ | Будет ли регистрировать события в консоли. |
| прокси | нить | неопределенный | URL для проекта должен быть использован для загрузки изображений поперечного происхождения. |
| trainttest | Логический | истинный | Чтобы проверить каждое изображение, если оно разрушает холст перед тем, как их рисовать |
| Тайм -аут | число | 0 | Тайм -аут для загрузки изображений, в миллисекундах. |
| ширина | число | нулевой | Определите ширину холста в пикселях. |
| использование | Логический | ЛОЖЬ | Пытаться загрузить образы перекрестного происхождения в качестве сервиса CORS, прежде чем вернуться к прокси-саму |
После предложения, когда вы говорите о проблемах, с которыми вы столкнулись в своем использовании, скриншот может перехватывать контент только на текущем экране. Найдите решение после проверки подключаемого исходного кода и отладки. Поместите исходный код и измененный код ниже
Исходный код:
Return renderdocument (node.ownerdocume, options, node.ownerdocument.defaultview.innerwidth, node.ownerdocumew.innerheight, inde x). ) (Options.onrendered устарел, html2canvas return, обещание содержит холст);
Изменить код:
// 2016-02-18 Измените исходный код, чтобы решить параметр, который не может быть использован для добавления пользовательской ширины в полную экрану для поддержки var width = options. ! = NULL? ) {log (options.onrendered устарел, html2canvas возвращает обещание, содержащее холм);В основном это позволяет пользователям настраивать ширину и высоту объекта DOM при вызове.
$ (#Btn_screen) .on (click, function () {html2canvas ($ (#tbl_exception), {hight: $ (#tbl_except) .outerheight () + 20, OnRendered: fuins. (Canvas) {var url = canvas. todataurl (); [0] .click (); СуммироватьЧерез фронтальную плату -в том, что я должен сказать, что функция экрана становится все более сильной и сильной. Все учится.