Сохранить скрытый DIV как холст - PullRequest
Новая
       10

Сохранить скрытый DIV как холст

0 голосов
/ 31 августа 2018

Я использовал следующий код для сохранения видимого как изображения. 

html2canvas(document.querySelector('.specific'), {
        onrendered: function(canvas) {
        theCanvas = canvas;
        Canvas2Image.saveAsPNG(canvas); 
    }
});

Есть ли способ сохранить скрытое

1 Ответ

0 голосов
/ 31 августа 2018

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

Раствор 1

Быстро переключать свойство видимости 

const el = document.querySelector('.specific');
el.style.display = "block"; // or any other property, like opacity, visibility...
html2canvas(el, {...}).then((canvas) => {
   el.style.display = "none";
};

Раствор 2

Оберните свой div (и сделайте его видимым) внутри невидимой оболочки 

<div style="position: absolute; opacity: 0; pointer-events:none;">
    <div class="specific"></div>
</div>

или 

<div style="overflow: hidden; height: 0;">
    <div class="specific"></div>
</div>

Решение 3

Используя функцию обратного вызова html2canvas onclone, вы можете изменить объект, переданный для рендерера (я думаю, что это лучшее решение) 

html2canvas(document.querySelector('.specific'), {
    onclone: function(doc){
        doc.style.display = 'block';
        // or doc.style.opacity = '1', doc.style.visibility = 'visible' ...
    },
    onrendered: function(canvas) {
        theCanvas = canvas;
        Canvas2Image.saveAsPNG(canvas); 
    }
});
...