javascript - 使用 html2canvas 隐藏 div 的屏幕截图

标签 javascript jquery html5-canvas

如何截取隐藏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>
  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”时,它就会起作用。

最佳答案

html2canvas(mydiv, {
    onclone: function (clonedDoc) {
        clonedDoc.getElementById('mydiv').style.display = 'block';
    }
}).then((canvas)=>{
//your onrendered function code here
})

关于javascript - 使用 html2canvas 隐藏 div 的屏幕截图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20605269/

相关文章:

javascript - 通过动画 div 向左推送动画 float 的 div

javascript - 如何为 jQuery 中的每个数组元素附加不同的动画效果?并使用 2 个按钮(下一个)一个一个地向前和向后设置动画?

javascript - 下拉菜单水印与其他字段不同

javascript - image.onload 在图像完全加载之前触发

javascript - React-Redux/Jest 不变违规 : Could not find "store"

Javascript如何更新计数?

javascript - 形式选项中的方程

jquery - 沼泽类在移动菜单中弹跳

javascript - DataTable 水平滚动条看起来像窗口滚动 -x

html - 没有得到实际的 Canvas 高度和宽度,并且 fillRect 被模糊了