Скриншот скрытого div с использованием html2canvas

Как сделать скриншоты скрытого div? Код, приведенный ниже, не работает для скрытого div.

HTML

<div id="mydiv" style="display:none;" >  
 <p>Text</p>
</div>

<div id="canvas" style="display:none;">
<p>Canvas:</p>
</div>

 <div id="image">

  </div>

SCRIPT

<script>
  var elem = $('#printDiv');
        html2canvas(elem, {
            onrendered: function (canvas) {
                var data = canvas.toDataURL('image/png');
                var image = new Image();
                image.src = data;
                document.getElementById('image').appendChild(image);
            }
        });

</script>

Он работает, когда мы устанавливаем стиль div "mydiv" как "display: block".

Ответы

Ответ 1

Вы можете использовать opacity, равный 0. Вот пример:

<div style="position: absolute; opacity: 0.0;">
    <div id="tempImageThumbnail"></div>
</div>
var tempImageThumb = $('#tempImageThumbnail');
tempImageThumb.append("<div>some text</div>");

html2canvas([tempImageThumb.get(0)], {
    onrendered : function(canvas) {
         document.body.appendChild(canvas);
    }
});

Ответ 2

Используйте "видимость: нет" вместо "display: none" в div и измените следующее в файле html2canvas.js script - в функции parseElement change

 if (getCSS(el, 'display') !== "none" && getCSS(el, 'visibility') !== "hidden")

to

if (getCSS(el, 'display') !== "none")

Ответ 3

Я не уверен, что это невозможно. Как насчет отображения div, захвата и затем скрыть его снова?

var elem = $('#printDiv');

html2canvas(elem, {
    onrendered: function (canvas) {
        elem.show();
        var data = canvas.toDataURL('image/png');
        var image = new Image();
        image.src = data;
        document.getElementById('image').appendChild(image);
        elem.hide();
    }
});

Ответ 4

html2canvas предоставляет опцию " onclone", передавая клонированный документ. Вы можете установить видимость своего скрытого элемента.

onclone: function(doc){
    hiddenDiv = doc.getElementById('myDiv');
    hiddenDiv.style.display = 'block';
}

Ответ 5

Во-первых, смею сказать: это решение будет работать нормально во всех случаях إن شاء الله

Поскольку это решение основано на jQuery API, не используйте hide/show, а используйте fadeOut/fadeIn вместо этого.

SCRIPT:

<script>

           var elem = $('#printDiv');
            if(!elem.is(":visible")){
                elem.show();elem.fadeIn(1);elem.fadeOut(1);
             }
            html2canvas(elem, {
                onrendered: function (canvas) {
                  //your staff here
                }
            });

    </script>

ПРИМЕЧАНИЕ. Мы используем этот репозиторий html2canvas, синтаксис будет then вместо onrendered обратного вызова:

<script>

           var elem = $('#printDiv');
            if(!elem.is(":visible")){
                elem.show();elem.fadeIn(1);elem.fadeOut(1);
             }
            html2canvas(elem).then(function (canvas) {
                  //your staff here
                }
            );

    </script>

Ответ 6

Использовать видимость: свернуть он будет работать