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