Puppeteer截图中Flourish主图表模糊但其他页面元素清晰的问题求助

我之前也踩过Flourish可视化在Puppeteer里截图模糊的坑，折腾了好一阵才摸清楚几个有效的解决方向，你可以按优先级试试下面这些方案：

1. 重点处理Flourish的iframe（最可能解决问题） #

Flourish的公开可视化几乎都是嵌套在独立iframe里的，你当前给外层页面设置的deviceScaleFactor并不会自动同步到iframe内部——iframe里的Canvas/SVG还是用默认低DPI渲染，自然截图就模糊了。

你可以直接定位到目标iframe，切换到它的上下文单独配置高DPI，甚至直接截取iframe的内容：

(async () => {
    const browser = await puppeteer.launch({ headless: false, devtools: true });
    const page = await browser.newPage();
    await page.setViewport({ width: 1920, height: 1080, deviceScaleFactor: 3 });

    await page.goto('https://public.flourish.studio/visualisation/19321054/', { waitUntil: 'networkidle2' });

    // 等待Flourish的iframe加载并获取它的上下文
    const iframe = await page.waitForSelector('iframe[src^="https://public.flourish.studio/visualisation/"]');
    const frame = await iframe.contentFrame();
    // 给iframe单独设置高分辨率参数
    await frame.setViewport({ width: 1920, height: 1080, deviceScaleFactor: 3 });
    // 等待iframe内部资源完全加载
    await frame.waitForNavigation({ waitUntil: 'networkidle2' });

    // 后续截图换成直接截iframe的内容（如果要整个页面，也可以保留原逻辑，但必须确保iframe DPI同步）
    await frame.screenshot({
        path: screenshotPath,
        fullPage: true,
        type: 'png'
    });
})();

2. 等待图表完全渲染完成 #

networkidle2只能判断网络请求结束，但Flourish的条形图竞赛是动态Canvas动画，可能网络停了但图表还在初始化渲染。你可以加几个额外的等待逻辑：

// 进入iframe上下文后，等待图表核心容器出现
await frame.waitForSelector('.flourish-bar-race__container');
// 再加1-2秒延迟，确保动画帧渲染稳定（根据图表复杂度调整）
await page.waitForTimeout(1500);

3. 强制全局高DPI渲染 #

可以在启动浏览器时直接通过参数全局强制设备缩放比例，避免页面和iframe的DPI不一致：

const browser = await puppeteer.launch({
    headless: false,
    devtools: true,
    args: [
        '--force-device-scale-factor=3',
        '--disable-gpu', // 禁用GPU加速，避免Canvas渲染的硬件兼容性问题
        '--no-sandbox'
    ],
    defaultViewport: { width: 1920, height: 1080, deviceScaleFactor: 3 }
});

4. 尝试切换到SVG渲染模式（如果支持） #

Flourish部分可视化支持在Canvas和SVG渲染模式之间切换，SVG是矢量格式，截图天生更清晰。你可以尝试在iframe上下文里执行代码切换：

await frame.evaluate(() => {
    // 尝试访问Flourish暴露的可视化实例
    if (window.Flourish?.viz) {
        window.Flourish.viz.set({ renderer: "svg" });
    }
});

注意：部分公开可视化可能限制了配置修改权限，这个方法不一定通用，可以先在浏览器控制台测试能不能执行成功。

5. 调整截图参数细节 #

虽然你已经用了deviceScaleFactor，但可以再试试这几个参数优化：

• 去掉omitBackground: true：透明背景有时候会影响Canvas的渲染精度
• 开启captureBeyondViewport: true：确保iframe内容完全被捕获（和fullPage配合使用）

备注：内容来源于stack exchange，提问作者Pubg Mobile