La capture d'écran générée par FullScreenshot() à partir du package chromedp est trop floue, comment puis-je l'améliorer ?-Golang-php.cn

La capture d'écran générée par FullScreenshot() à partir du package chromedp est trop floue, comment puis-je l'améliorer ?

PHPz

Libérer： 2024-02-14 14:48:19

avant

1316 Les gens l'ont consulté

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

php小编柚子有一个关于chromedp包的问题需要解答。问题是关于使用FullScreenshot()生成的屏幕截图太模糊，需要改进的方法。在使用chromedp包时，生成的屏幕截图质量可能不如预期，这可能是由于一些配置或参数设置不正确导致的。下面将介绍一些可能的改进方法，帮助你得到更清晰的屏幕截图。

问题内容

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

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

}

Copier après la connexion

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

Copier après la connexion

我想也许有一个 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)
    }
}

Copier après la connexion

较大的 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

Copier après la connexion

其他注意事项：

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!