JS通过html2canvas截取屏幕(包含滚动条隐藏部分)并生成base64字符图片

最新推荐文章于 2026-08-14 13:08:58 发布

转载最新推荐文章于 2026-08-14 13:08:58 发布 · 3.5k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://www.langhuaquan.com/blog/119.html

收录于

当前文章被收录于：

13 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了一种使用html2canvas在JavaScript中截取屏幕的方法，特别解决了滚动条隐藏部分的截图问题。通过克隆目标DOM元素，并调整其宽度和高度为scrollWidth和scrollHeight，确保完整捕获内容，最终生成base64字符图片。

JS通过html2canvas截取屏幕(包含滚动条隐藏部分)并生成base64字符图片

function saveHistoryImg() {
    //解决截屏时，滚动条隐藏部分不能截取问题
    var targetDom = document.querySelector(".Contain_box");  
    var copyDom = targetDom.cloneNode(true); 
    copyDom.style.width = targetDom.scrollWidth  + "px";
    copyDom.style.height = targetDom.scrollHeight  + "px";
    document.querySelector("body").appendChild(copyDom); 
				
    html2canvas(copyDom, {
        onrendered : function(canvas) {  
	        var image = canvas.toDataURL("image/png");
	        zkbind.$('$tourPaymentEditWindow').command("onSave", {"image":image});
          copyDom.remove();
	        }  
	});
}

标签

#html2canvas #js生成截图