由于浏览器同源策略限制，前端无法直接抓取不同域名网页的 dom 并截图；需借助代理服务绕过 cors 限制，再结合 html2canvas 渲染并捕获滚动内容。本文提供完整本地可运行方案（无需部署服务器）。
由于浏览器同源策略限制，前端无法直接抓取不同域名网页的 dom 并截图；需借助代理服务绕过 cors 限制，再结合 html2canvas 渲染并捕获滚动内容。本文提供完整本地可运行方案（无需部署服务器）。
实现跨域网页的全页滚动截图，本质上面临两个核心限制：CORS 策略阻止跨域资源读取，以及 html2canvas 无法直接渲染外部页面 iframe 或跨域 iframe 内容。关键在于——我们不能“直接加载并截图远程页面”，而必须“在本域内安全地获取、解析并重建目标页面结构”，再进行渲染与截图。
✅ 正确思路是：
- 使用 CORS 代理（如 cors-anywhere）获取目标网页 HTML 源码；
- 将 HTML 字符串注入当前页面的一个隐藏 <iframe> 或 <div> 中（注意：需处理相对路径、脚本执行、样式隔离等风险）；
- 等待内容加载完成，用 html2canvas 对该容器执行滚动截图（支持长页面自动拼接）。
⚠️ 重要前提与注意事项：
- cors-anywhere.herokuapp.com 已于 2023 年关闭，生产环境不可用；本地开发可临时自建轻量代理（如 npx cors-anywhere），或改用 https://www.php.cn/link/0916f1db3e9e09d43a82ea0a0d88eb8c（免费、无需注册）；
- 远程页面含动态 JS、第三方资源（如 CDN 图片、字体、API 调用）时，本地渲染可能失败或失真；
- 浏览器禁止执行跨域 iframe 的 document.write() 或 srcdoc 中的脚本（默认禁用），因此建议仅渲染静态 HTML + CSS，禁用脚本执行以保障安全；
- html2canvas 不支持 iframe 内容截图，故必须将 HTML 解析后注入同源 DOM 容器（如 <div id="render-container">），而非 <iframe>。
? 完整可运行示例（纯前端，保存为 .html 文件即可双击运行）：
立即学习“Java免费学习笔记（深入）”；
<!DOCTYPE html>
<html>
<head>
<title>跨域网页滚动截图工具</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<style>
#render-container { width: 100%; min-height: 500px; border: 1px solid #ccc; overflow: hidden; }
.loading { color: #666; font-style: italic; }
</style>
</head>
<body>
<input type="url" id="input-URL" placeholder="https://example.com" value="https://httpbin.org/html">
<button id="get-screenshot">获取滚动截图</button>
<div id="show-webpage">
<div id="render-container" class="loading">等待加载...</div>
</div>
<script>
document.getElementById('get-screenshot').addEventListener('click', async () => {
const urlInput = document.getElementById('input-URL').value.trim();
if (!urlInput) return;
const container = document.getElementById('render-container');
container.innerHTML = '<div class="loading">正在加载远程页面...</div>';
try {
// ✅ 使用 AllOrigins 免费代理（无需 token，支持 HTTPS）
const proxyUrl = `https://www.php.cn/link/0916f1db3e9e09d43a82ea0a0d88eb8c/get?url=${encodeURIComponent(urlInput)}`;
const res = await fetch(proxyUrl);
const data = await res.json();
if (!data.contents) throw new Error('无法获取页面内容，请检查 URL 或网络');
// ? 安全处理：移除 script 标签，清理危险属性（onerror/onload 等）
const cleanHTML = data.contents
.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
.replace(/on\w+="[^"]*"/gi, '');
// 注入到容器（使用 srcdoc 避免执行脚本，但仅支持部分浏览器；fallback 用 innerHTML）
container.innerHTML = cleanHTML;
// 等待图片、样式加载（简单延时，生产环境建议监听 load 事件）
await new Promise(r => setTimeout(r, 1500));
// ? 执行滚动截图（支持长页面）
const canvas = await html2canvas(container, {
scrollY: 0,
scale: 2, // 提升清晰度
useCORS: true,
allowTaint: true,
logging: false
});
const img = canvas.toDataURL('image/png');
document.getElementById('show-webpage').innerHTML = `<h3>截图结果：</h3><img src="${img}" style="max-width:100%;height:auto;">`;
} catch (err) {
container.innerHTML = `<div style="color:red;">错误：${err.message}</div>`;
console.error('截图失败:', err);
}
});
</script>
</body>
</html>? 总结：
- 本地运行可行，但依赖外部代理服务，稳定性受其限制；
- 真正健壮的解决方案需后端中转（如 Node.js + Puppeteer），由服务端无头浏览器截图并返回 PNG，完全规避 CORS；
- 本方案适用于学习、演示和低频调试，切勿用于敏感网站或生产环境；
- 若需长期稳定使用，推荐自行部署轻量代理（如 cors-anywhere 或 nginx 反向代理），或接入 Puppeteer API 服务。
? 小技巧：测试时优先选用静态页面（如 https://httpbin.org/html），避免因 JS 错误或资源加载失败导致渲染异常。
