chromedp中FullScreenshot()生成截图模糊，如何提升清晰度？

使用chromedp的FullScreenshot()生成的截图过于模糊，当前使用低端设备，猜测问题可能与DPI设置或设备性能有关，寻求提升截图清晰度的解决方案。

相关代码 #

Go代码 #

func main() {

    chromeCTX, _ := chromedp.NewContext(context.Background())
    emulation.SetDeviceMetricsOverride(1920, 1080, 1.0, false).Do(chromeCTX)

    var width, height int64
    var b []byte
    err := chromedp.Run(chromeCTX,
        chromedp.EmulateViewport(10, 10),
        chromedp.Navigate(`The content of the file is in the code block below.html`),
        chromedp.EvaluateAsDevTools(`document.documentElement.scrollWidth`, &width),
        chromedp.EmulateViewport(width, 10),
        chromedp.EvaluateAsDevTools(`document.documentElement.scrollHeight`, &height),
        chromedp.EmulateViewport(width, height),
        chromedp.FullScreenshot(&b, 100),
    )
    if err != nil {
        log.Fatal(err)
    }
    err = ioutil.WriteFile("test.png", b, 0777)
    if err != nil {
        log.Fatal(err)
    }

}

HTML代码 #

<!DOCTYPE html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="main">
# 123
123
$\sin(x)=\sum_{n=0}^{\infty} \frac{(-1)^n}{(2n+1)!}x^{2n+1} \sin(x)=\sum_{n=0}^{\infty} \frac{(-1)^n}{(2n+1)!}x^{2n+1} \sin(x)=\sum_{n=0}^{\infty} \frac{(-1)^n}{(2n+1)!}x^{2n+1} \sin(x)=\sum_{n=0}^{\infty} \frac{(-1)^n}{(2n+1)!}x^{2n+1}$
</div>

<script src="https://cdn.jsdelivr.net/npm/markdown-it-latex2img@0.0.6/dist/markdown-it-latex2img.min.js"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/markdown-it@11.0.0/dist/markdown-it.min.js"
    crossorigin="anonymous"></script>
<script>
    var main = document.getElementById("main");
    var md = window.markdownit({ html: true });
    md.use(window.markdownitLatex2img, { style: "filter: opacity(75%);transform:scale(0.75);text-align:center" });
    var result = md.render(main.innerHTML);
    main.innerHTML = result;
</script>
</body>

截图情况 #

生成的截图中，文字及LaTeX公式显示模糊，细节辨识度低。

1. 调高设备像素比（核心优化） #

原代码中SetDeviceMetricsOverride的第三个参数为像素比1.0，低端设备DPI适配不足时会导致渲染分辨率偏低。将该值调整为2.0或更高（如3.0），让Chrome渲染高分辨率内容：

emulation.SetDeviceMetricsOverride(1920, 1080, 2.0, false).Do(chromeCTX)

同时，获取页面宽高后需乘以像素比，确保视口与渲染分辨率匹配：

pixelRatio := 2.0
// 获取宽高后执行
width = int64(float64(width) * pixelRatio)
height = int64(float64(height) * pixelRatio)
chromedp.EmulateViewport(width, height).Do(chromeCTX)

2. 简化视口设置逻辑 #

原代码多次调用EmulateViewport易导致渲染状态不稳定，优化流程如下：

err := chromedp.Run(chromeCTX,
    chromedp.Navigate(`The content of the file is in the code block below.html`),
    // 等待页面元素完全渲染（尤其确保LaTeX公式加载完成）
    chromedp.WaitVisible(`#main`),
    chromedp.EvaluateAsDevTools(`document.documentElement.scrollWidth`, &width),
    chromedp.EvaluateAsDevTools(`document.documentElement.scrollHeight`, &height),
    // 应用高像素比的设备参数
    emulation.SetDeviceMetricsOverride(width, height, 2.0, false),
    chromedp.FullScreenshot(&b, 100),
)

3. 禁用Chrome低性能模式 #

低端设备可能触发Chrome的性能优化策略，降低渲染质量。启动Chrome时添加以下参数禁用该模式：

opts := append(chromedp.DefaultExecAllocatorOptions[:],
    chromedp.Flag("disable-low-end-device-mode", true),
    chromedp.Flag("disable-gpu-vsync", true),
)
allocCtx, _ := chromedp.NewExecAllocator(context.Background(), opts...)
chromeCTX, _ := chromedp.NewContext(allocCtx)

4. 移除LaTeX缩放设置 #

HTML中LaTeX公式设置了transform:scale(0.75)，缩放会导致模糊。移除该属性，保持原始渲染尺寸：

md.use(window.markdownitLatex2img, { style: "filter: opacity(75%);text-align:center" });

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