有些 Chrome 浏览器插件可以对较长的网页进行滚动截图,而 Edge 浏览器本身就支持这一功能。而如果要对网页中较长的有滚动条的节点进行完整截图,则以上方式都不好用。虽然浏览器开发工具中提供了“捕获节点屏幕截图”功能,但有时只能截取到节点的屏幕可见部分。这时可以试试下面的代码:
(async () => {
const node = ;
const rect = node.getBoundingClientRect();
const script = document.createElement('script');
script.src = '
网页链接 document.body.appendChild(script);
script.onload = async () => {
const canvas = await html2canvas(node, {useCORS: true});
const link = document.createElement('a');
link.download = 'screenshot.png';
link.href = canvas.toDataURL();
link.click();
};
})();
也可以把 html2canvas 换成更先进一些的 SnapDOM:
(async () => {
const node = $0;
const script = document.createElement('script');
script.src = '
网页链接 document.body.appendChild(script);
script.onload = async () => {
try {
const img = await snapdom.toPng(node);
const canvas = document.createElement('canvas');
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
canvas.getContext('2d').drawImage(img, 0, 0);
const dataUrl = canvas.toDataURL('image/png');
const link = document.createElement('a');
link.download = 'screenshot.png';
link.href = dataUrl;
link.click();
} catch (error) {
console.error('snapdom toPng failed:', error);
}
};
})();
在浏览器开发工具中选中要截图的节点,然后在控制台执行上面的代码,就会得到截图。不过这种方法也有缺点:
1、节点中的跨域图片不会出现在截图里。
2、如果网页开启了 Content Security Policy 则因为无法加载外部 JS 而失败。
3、有些情况也无法得到完整截图。