使用html2canvas实现超出浏览器部分截图

最新推荐文章于 2025-05-30 09:19:00 发布

转载

最新推荐文章于 2025-05-30 09:19:00 发布 · 5.1k 阅读

文章标签：

#javascript #ViewUI

当使用html2canvas进行截图时，若元素大小超出浏览器可视区域，超出部分默认无法截图。通过调整源码中特定部分，可以实现超出部分的截图。本文提供了一个亲测有效的解决方法，并给出了修改后的代码示例，同时也推荐了html2canvas的踩坑总结供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前写过一篇关于 html2canvas如何在元素隐藏的情况下生成截图的文章，后面发现还有个坑在等着我，就是如果合成图片太大，超出了浏览器的可视区域，那么超出部分是无法截图的。在网上找到了以下方法，亲测有效~

源码：

return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth, node.ownerDocument.defaultView.innerHeight, index).then(function(canvas) {
        if (typeof(options.onrendered) === "function") {
            log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
            options.onrendered(canvas);
        }