Html2canvas: сохранение элемента, выходящего за пределы области просмотра

Созданный на 3 нояб. 2017  ·  4Комментарии  ·  Источник: niklasvh/html2canvas

Я пытаюсь использовать это, чтобы сохранить страницу, которая выходит за пределы области просмотра, но продолжает обрезаться. Есть ли способ сохранить . ниже приведен код, который я использую. когда я делаю элемент достаточно маленьким, чтобы поместиться в окне просмотра, он работает просто отлично, но изображение, которое я получаю, слишком мало для того, для чего оно мне нужно, и увеличение размера только делает его размытым. Некоторые из этих изображений в том размере, который мне нужен, имеют высоту 1300 пикселей и выше.

`html2canvas (предварительный просмотр, {
фон: '#ffffff',
при рендеринге: (холст)=>{

            canvas.toBlob((blob)=>{
                FileSaver.saveAs(blob, 'mysave.png');
            })

        }
    })`

Самый полезный комментарий

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

var clone = document.getElementById('my_element').cloneNode(true);
//... style the clone so it doesn't have scroll...

return html2canvas(clone, {
        useCORS: true,
        allowTaint: false,
        logging: false
    }).then(function (canvas) {
        document.body.removeChild(clone);
        return canvas;
    });

Все 4 Комментарий

Если элемент, содержащийся в контейнере, div, модальном и т. д., имеет внутреннюю прокрутку?

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

Не хорошо. я настроил так, чтобы контейнер, который я захватил, имел прокрутку, чтобы показать полный дом, и он все еще обрезается в видимой части экрана.

какие еще мысли??

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

var clone = document.getElementById('my_element').cloneNode(true);
//... style the clone so it doesn't have scroll...

return html2canvas(clone, {
        useCORS: true,
        allowTaint: false,
        logging: false
    }).then(function (canvas) {
        document.body.removeChild(clone);
        return canvas;
    });
Была ли эта страница полезной?
0 / 5 - 0 рейтинги