首页 > Golang > Go问答

如何改进 chromedp 包中 FullScreenshot() 生成的模糊屏幕截图？

来源：stackoverflow

时间：2024-02-07 22:15:21 137浏览收藏

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《如何改进 chromedp 包中 FullScreenshot() 生成的模糊屏幕截图？》，很明显是关于Golang的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

问题内容

如标题所示，这是结果和我的代码。顺便说一句，我用的是一台非常低端的机器。

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/[email protected]/dist/markdown-it-latex2img.min.js"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

我想也许有一个 dpi 的设置？还是因为我的机器太弱了？不幸的是，我没有更多的资源来探索真相。所以请各位帮忙，怎样才能让截图更清晰？

正确答案

与您机器的配置无关。增加 devicescalefactor 将使图像看起来更好。请参阅下面的演示：

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

较大的 devicescalefactor 会产生较大的图像：

$ 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

其他注意事项：

在您的代码中， emulation.setdevicemetricsoverride(1920, 1080, 1.0, false).do(chromectx) 返回 chromedp.errinvalidcontext 错误。它可以被完全删除。
在您的代码中，对 chromedp.emulateviewport 的所有调用均通过参数 width: 0 和 height: 0 传递。应将其包装在 chromedp.actionfunc 中以获取更新的 width 和 height。

好了，本文到此结束，带大家了解了《如何改进 chromedp 包中 FullScreenshot() 生成的模糊屏幕截图？》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多Golang知识！

声明：本文转载于：stackoverflow 如有侵犯，请联系study_golang@163.com删除