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

Question

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?

DO NOT post images of code, data, error messages, etc.—copy or type the text into the question. See https://stackoverflow.com/help/how-to-ask — Zeke Lu, Jun 20 '23 at 12:29
@ZekeLu I'm very sorry. I just felt that the code was simple and straightforward, and my problem should not be related to this code, so I did not provide a code block. I apologize again for any inconvenience I've caused you. — Rootive, Jun 20 '23 at 13:11
I just pasted the requirement from the linked page. It's a reminder, not a blame. So don't need apologies. But we do need the source code to reproduce the issue. So please provide it in plain text. And Please replace the local file with a public available page so that we can reproduce the issue ourselves. — Zeke Lu, Jun 20 '23 at 13:22
Please replace the path to the local file with a public available page and update the generated image accordingly. So that I can compare it with the one generated on my machine. — Zeke Lu, Jun 20 '23 at 13:27
I have tried my best to complete it in a timely manner, but I don't have experience storing files on a public platform. So I would appreciate it if you could create it yourself. — Rootive, Jun 20 '23 at 13:41
I contains everything needed to reproduce the issue now. Thank you! — Zeke Lu, Jun 20 '23 at 13:47

Zeke Lu · Accepted Answer · 2023-06-20T15:01:11.460

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.

Wow, your code is working! Thank you very much for your patience and I really admire your professional skills. — Rootive, Jun 20 '23 at 16:24

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

1 Answers1