HTML2Canvas не отображает полный div, только то, что видно на экране?

Я пытаюсь использовать HTML2Canvas, чтобы отобразить содержимое div. Вот код:

var htmlSource = $('#potenzial-page')[0];

$('#btn').on("click", function() {          

    html2canvas(htmlSource).then(function(canvas) {
        var img = canvas.toDataURL();
        window.open(img);
    });

});

Я использую v5 beta 3.

Когда этот код работает, он отображает только то, что видно на экране. #potenzial-page div - это, по сути, целая страница, минус верхний и нижний колонтитулы. Весь контент в этом div виден прокруткой (есть некоторые скрытые элементы, но я не хочу, чтобы скрытые элементы были видны на изображении.)

Я не могу найти, что неправильно или почему это не спасет весь div. Я должен также отметить, что изображение выглядит так же высоко, как div, но только частично видимым.

Чтобы привести пример того, что я имею в виду, вот сравнение:

Слева - как HTML2Canvas должен отображать div. Правило показывает, как это проявляется при выполнении кода выше. Правильный образ - это то, что видно на экране моих браузеров.

Я попытался добавить параметр height, но это не имеет значения.

UPDATE

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

Как визуализировать div без прокрутки вверх?

Ответы

Ответ 1

Решение, которое работало для меня, заключалось в следующем:

.html2canvas-container { width: 3000px !important; height: 3000px !important; }

Это предотвращает ограничение html2canvas рендерингом видимой области (которая по умолчанию является по умолчанию).

Смотрите здесь: https://github.com/niklasvh/html2canvas/issues/117

Ответ 2

Вы видели это решение в SO: "Html2canvas конвертирует переполненный контент в изображение" Предлагается решение обходного решения с настройкой переполнения на видимый, а затем визуализация, а затем переполнение скрытой.

Ответ 3

Если у вас есть высота, установленная в div, который вы хотите превратить в холст - вы должны удалить его, прежде чем делать снимок. В противном случае он просто отрежет его из-за этой высоты.

 $(".yourElemThatHasSomeHeightSet").css("height", "");

Тогда вы заметите, что прокрутка вниз - все равно обрежет ваш документ. Просто сделайте:

$("html, body").scrollTop(0);

прежде чем сделать снимок.

Ответ 4

Вы можете добавить позицию прокрутки в качестве переменной в html2canvas, что устраняет необходимость прокручивать страницу.

html2canvas(document.querySelector("#your-element"), { scrollX: 0, scrollY: 0 }).then(function(canvas) {

Ответ 5

Я использовал window.scrollTo() в моем случае, и он работал для меня.

Ниже приведен пример кода

$('#btn').on("click", function() { 
    window.scrollTo(0,0);     
    html2canvas(htmlSource).then(function(canvas) {
        var img = canvas.toDataURL();
        window.open(img);
    });
    window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);
});

Ответ 6

  window.scrollTo(0,0);

Добавить это работает для меня.

Ответ 7

Я просто сделал что-то вроде этого, и это сработало для меня:

html2canvas(document.querySelector("#capture2image"), {
            allowTaint: true,
            useCORS: true,
            logging: false,
            height: window.outerHeight + window.innerHeight,
            windowHeight: window.outerHeight + window.innerHeight,