Html2canvas: 保存超出视口的元素

创建于 2017-11-03 · 4评论 · 资料来源: niklasvh/html2canvas

我试图用它来保存一个页面，该页面超出了视口，但它一直被切断。有没有办法保存。下面是我使用的代码。当我使元素足够小以适合视口时，它工作得很好，但是我得到的图像对于我需要它来说太小了，并且增加尺寸只会使模糊。我需要的这些图像中的一些尺寸是 1300px+ 高

`html2canvas（预览，{
背景：'#ffffff',
渲染：（画布）=>{

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

        }
    })`

资料来源

dking3876

最有用的评论

您可以尝试在捕获发生时克隆元素的内容并将它们附加到正文中，然后将其删除。就像是

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;
    });

ffflabs 于 2017-11-08

👍3

所有4条评论

如果包含在具有内部滚动的容器、div、模态等中的元素？

ffflabs 于 2017-11-04

我要捕获的直接容器没有滚动，但父容器有。我将尝试将滚动放在直接容器上，看看是否有效

dking3876 于 2017-11-06

不好。我进行了调整，以便即时捕获的容器滚动以显示完整的 dom，并且它仍然在屏幕可见部分被切断。

还有其他想法吗？？

dking3876 于 2017-11-07

您可以尝试在捕获发生时克隆元素的内容并将它们附加到正文中，然后将其删除。就像是

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;
    });

ffflabs 于 2017-11-08

👍3

此页面是否有帮助？

0 / 5 - 0 等级

Html2canvas: 保存超出视口的元素

最有用的评论

所有4条评论

相关问题