如何用Vanilla JS实现跨域网页长截图并支持本地运行

核心问题分析 #

你遇到的CORS错误源于本地直接打开HTML文件时使用的file://协议——浏览器默认禁止该协议发起跨域请求，同时限制跨域资源的访问。要在本地实现需求，必须先解除浏览器的相关限制，再结合html2canvas完成截图逻辑。

步骤1：解除浏览器本地跨域限制 #

以Chrome为例，关闭所有Chrome窗口后，按以下方式启动：

• Windows：右键Chrome快捷方式→属性→目标栏末尾添加 --allow-file-access-from-files --disable-web-security --user-data-dir="C:/ChromeTemp"（注意参数前有空格）
• Mac：打开终端，执行 open -a "Google Chrome" --args --allow-file-access-from-files --disable-web-security --user-data-dir="/tmp/ChromeTemp"

注意：--disable-web-security会关闭浏览器跨域安全校验，仅用于本地测试，不要用该模式访问陌生网站，测试完成后恢复正常启动方式。

步骤2：完整实现代码 #

将以下代码保存为本地HTML文件，用上述启动的Chrome打开即可：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Local Webpage Screenshot</title>
    <!-- 引入html2canvas -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <style>
        #show-webpage {
            margin-top: 20px;
            border: 1px solid #ccc;
            padding: 10px;
        }
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <input type="url" id="input-URL" placeholder="输入目标网页URL">
    <button id="get-screenshot">Get scrolling image</button>
    <div id="show-webpage"></div>

    <script>
        const inputUrl = document.getElementById('input-URL');
        const getBtn = document.getElementById('get-screenshot');
        const showContainer = document.getElementById('show-webpage');

        getBtn.addEventListener('click', async () => {
            const url = inputUrl.value.trim();
            if (!url) {
                alert('请输入有效的URL');
                return;
            }

            // 创建隐藏iframe加载目标页面
            const iframe = document.createElement('iframe');
            iframe.style.display = 'none';
            iframe.src = url;
            document.body.appendChild(iframe);

            // 等待iframe加载完成
            await new Promise((resolve, reject) => {
                iframe.onload = resolve;
                iframe.onerror = () => reject(new Error('页面加载失败，请检查URL或网站是否允许嵌入'));
            });

            try {
                // 截取iframe内容的长截图
                const canvas = await html2canvas(iframe.contentDocument.body, {
                    useCORS: true,
                    logging: false
                });

                // 将canvas转为图片并展示
                const img = document.createElement('img');
                img.src = canvas.toDataURL('image/png');
                showContainer.innerHTML = '';
                showContainer.appendChild(img);
            } catch (err) {
                alert(`截图失败：${err.message}`);
            } finally {
                // 移除iframe
                document.body.removeChild(iframe);
            }
        });
    </script>
</body>
</html>

注意事项 #

• 部分网站设置了X-Frame-Options或Content-Security-Policy禁止被嵌入iframe，这类网站无法用此方法截图。
• 必须使用修改启动参数后的Chrome打开本地HTML文件，否则仍会触发CORS错误。
• 测试完成后，务必关闭Chrome并恢复正常启动方式，避免安全风险。

内容的提问来源于stack exchange，提问作者mufc9000