Html2canvas: Отображает только то, что находится в поле зрения

Каким-то образом на ваших примерах на домашней странице он показывает все в теле, даже то, что не видно ... как вы это сделали?

Возможный дубликат с: https://github.com/niklasvh/html2canvas/issues/117

Итак, я хочу знать, как захватить указанный элемент? у кого-нибудь есть решение？

@justein Попробуйте это

<div id="test-case">Test-me</div>

html2canvas(document.getElementById("test-case")).then(function(canvas) {
    document.body.appendChild(canvas);
});

Я могу подтвердить это поведение последней версией. Он отобразит требуемый объект правильного размера, но на самом деле не отобразит на холст ничего, что находится за пределами экрана текущего окна просмотра. Так что если

<div id="test-case">Test-me</div>

в настоящее время отображается в браузере, он будет отображаться. Если это за кадром, холст пустой (но подходящего размера). Частично виден: частично визуализирован. Мой не действует как scrollHeight = 0, он отображает все, что видно при выполнении кода. (Моя кнопка внизу).

Как и комментарий btm, я хотел бы знать, как это делается на примере сайта. Может ли он полагаться на что-то в Angular или Bootstrap, чтобы получить ресурсы вне экрана?

@cchubb Я не понимаю, при чем

Если вам нужен рендер, который находится за пределами порта просмотра, просто используйте

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

Если вы хотите отобразить элементы «переполнения», удалите «переполнение» во время выполнения и добавьте снова после процесса, используя javascript для добавления className, например:

.no-scroll {
     overflow: visible !important;
}

#main {
     overflow: auto;
     height: 200px;
}

<div id="main">
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
</div>

document.getElementById("main").className = "no-scroll";
html2canvas(document.body).then(function (canvas) {
      document.getElementById("main").className = "";
});

Или просто укажите html2canvas, чтобы отобразить элемент внутри элемента с «переполнением», например:

#parent {
     overflow: auto;
     height: 200px;
}

#child {
background-color: #fc0;
height: 600px;
}
<div id="parent">
<div id="main">
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
</div>
</div>

html2canvas(document.getElementById("main")).then(function (canvas) {});

На самом деле есть много предложений по функциям, которые, с моей точки зрения, не нужны, просто выберите правильные элементы DOM и используйте «CSS» в их пользу.

Я понял. Вы исправили это в 0.5.0-alpha2. Если я использую версию 0.5.0-alpha1, она фиксируется, а версия alpha2 - нет. Я даже не заметил, что альфа2 доступна, потому что страница релизов была посвящена альфа1.

Вот скрипт, который демонстрирует, что теперь он работает с alpha2. https://jsfiddle.net/cchubb/fy7tw7ek/1/, если вы измените внешний ресурс обратно на alpha1, он будет обрезаться при нажатии на нижнюю ссылку. (Вам необходимо сохранить загруженный файл как .png, чтобы просмотреть его, скрипки не позволят мне изменить href окна вывода на данные.)

@ btm1 , попробуйте перейти на Alpha2.

@cchubb Я

@cchubb основная проблема исправлена ​​в альфа-

Хм, у меня даже в альфа2 рендерится только та часть элемента, которая "видна" во вьюпорте. См. Http://jsfiddle.net/NPC42/ykvL6a17/ для демонстрации - html2canvas экспортирует только те строки, которые прокручиваются в область просмотра (независимо от того, видны ли они в прокручиваемом контейнере div или нет).

Я как-то неправильно называю html2canvas? Когда я тестирую его на своем реальном коде (а не на JSFiddle, который я создал только для демонстрации), это предложение помогает визуализировать весь элемент: https://github.com/niklasvh/html2canvas/issues/650 , но я надеюсь чтобы избежать взлома библиотеки.

@NPC Он не будет просто отображать то, что не видно, если вы не сделаете ничего, что вам нужно изменить его на видимое переполнение ---> очень быстро экспортировать ---> затем снова изменить его, чтобы прокрутить снова, иначе это не сработает. Не идеальный ИМО, я думаю, должна быть возможность просто заставить его работать, но, по крайней мере, это так.

@ btm1 , да, я предполагаю, что это не намерение, поскольку я

На данный момент в моем приложении я обнаружил, что мне нужно повторно прикрепить весь свой элемент к телу, задав для него определенную ширину / высоту (поскольку он содержит абсолютно позиционированные элементы), тем временем покрывая всю эту кухню полноэкранным режимом «Подготовка экспорта, пожалуйста, подождите "оверлей, потому что html2canvas занимает 10+ секунд, чтобы отобразить все это. После завершения рендеринга я прикрепляю его обратно в исходное место (внутри контейнера с прокруткой), сбрасывая ширину / высоту.

Громоздко, но работает.

Как ни странно, он отрисовывается только от видимой в данный момент верхней границы данного элемента.

Попробуйте https://jsfiddle.net/bianjp/bpc3nq69/1/. Прокрутите до «Print Screen» и щелкните по нему. Сгенерированное изображение не будет включать верхние линии, которые не видны при нажатии.
Используется версия 0.5.0.beta4.

Решение состоит в том, чтобы вызвать $('html, body').scrollTop(0) (или любой другой способ сделать верхнюю часть элемента видимой) перед вызовом html2canvas.

спасибо @bianjp за предложенное исправление.

Как ни странно, он отрисовывается только от видимой в данный момент верхней границы данного элемента.

Это нормальное поведение ... Мне это кажется очень странным!

+1

Этот ТАК ответ сработал для меня.

Перед вызовом html2canvas прокрутите элемент, который вы хотите отобразить, в области просмотра.

const el = document.querySelector('#test')
el.scrollIntoView()
setTimeout(function () {
  html2canvas(el, {
    onrendered: function (canvas) {
      document.body.appendChild(canvas)
    },
    useCORS: true
  })
}, 10)

Меня устраивает.
Используемая версия - 0.5.0-beta4.

Это все еще проблема с версией 1.0.0 ? Если да, не могли бы вы поделиться примером на jsfiddle .

Эта проблема была автоматически закрыта, потому что на наш запрос о дополнительной информации от первоначального автора не поступило ответа. Имея только ту информацию, которая в настоящее время является проблемой, у нас недостаточно информации для принятия мер. Если у вас есть или вы найдете нужные нам ответы, свяжитесь с нами, чтобы мы могли продолжить расследование.

Привет, @niklashvh

Я также столкнулся с проблемой создания снимка, видимого только для DOM. У меня версия 0.5.0-beta4
Итак, я согласен с решением @ziyoung . Я сделал то же самое, что и он предложил.

           `$('html,body').scrollTop(0);

     html2canvas( $("#rectangular_div"), {
         useCORS: true,
         dpi: 200,

          onrendered:function(canvas) {

              var str = canvas.toDataURL("image/png");
              var contentType = 'image/png';
              console.log(str);
              b64Data =str;
              imgFrameSave();
          }
        })`

Итак, я устанавливаю позицию div наверху 0 в теле, а затем вызываю html2canvas. Итак, по моему опыту, я рекомендовал использовать версию 0.5.0-beta4 от @eKoopmans, чтобы вы могли избежать проблемы с

Это работает на настольных компьютерах, но не работает на мобильных устройствах.

Я сделал window.scrolTo(0,0) перед вызовом htmltocanvas (), если вы находитесь в верхней части экрана, div будет напечатан полностью