The screenshot generated by `FullScreenshot()` in chromedp package is too blurry, how can I improve it?

As shown in the title, here is the result and my code. By the way, I am using a very low-end machine.

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)
    }

}

<!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>

I guess maybe there is a setting for DPI? Or maybe it's because my machine is too weak? Unfortunately, I don't have more resources to explore the truth. So I'm asking for help from you guys, how can I make the screenshot clearer?

Solution

It has nothing to do with the configuration of your machine. Increasing DeviceScaleFactor will make the image look better. See the demo below:

package main

import (
    "context"
    "log"
    "os"

    "github.com/chromedp/cdproto/emulation"
    "github.com/chromedp/chromedp"
)

func main() {
    ctx, cancel := chromedp.NewContext(context.Background(), chromedp.WithDebugf(log.Printf))
    defer cancel()

    var width, height int64
    var b []byte
    err := chromedp.Run(ctx,
        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.ActionFunc(func(ctx context.Context) error {
            return chromedp.EmulateViewport(width, 10).Do(ctx)
        }),
        chromedp.EvaluateAsDevTools(`document.documentElement.scrollHeight`, &height),
        chromedp.ActionFunc(func(ctx context.Context) error {
            return chromedp.EmulateViewport(width, height, func(sdmop *emulation.SetDeviceMetricsOverrideParams, steep *emulation.SetTouchEmulationEnabledParams) {
                sdmop.DeviceScaleFactor = 3
            }).Do(ctx)
        }),
        chromedp.FullScreenshot(&b, 100),
    )
    if err != nil {
        log.Fatal(err)
    }
    err = os.WriteFile("test.png", b, 0o777)
    if err != nil {
        log.Fatal(err)
    }
}

Larger DeviceScaleFactor results in larger image:

$ file *.png
7e9rfcQO.png: PNG image data, 797 x 144, 8-bit/color RGBA, non-interlaced
test.png:     PNG image data, 2391 x 432, 8-bit/color RGBA, non-interlaced

Other things to note:

In your code, emulation.SetDeviceMetricsOverride(1920, 1080, 1.0, false).Do(chromeCTX) returns an chromedp.ErrInvalidContext error. It could be removed completely.
In your code, all the calls to chromedp.EmulateViewport are passed with parameters width: 0 and height: 0. It should be wrapped in a chromedp.ActionFunc to get the updated width and height.