`FullScreenshot()`函数在chromedp包中生成的截图太模糊了，我该如何改善它？

huangapple
go评论209阅读模式
英文:

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

问题

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

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>

`FullScreenshot()`函数在chromedp包中生成的截图太模糊了，我该如何改善它？
我猜可能有一个DPI的设置？或者可能是因为我的机器太弱了？不幸的是，我没有更多的资源来探索真相。所以我向你们寻求帮助，如何使截图更清晰？

英文:

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`, &amp;width),
		chromedp.EmulateViewport(width, 10),
		chromedp.EvaluateAsDevTools(`document.documentElement.scrollHeight`, &amp;height),
		chromedp.EmulateViewport(width, height),
		chromedp.FullScreenshot(&amp;b, 100),
	)
	if err != nil {
		log.Fatal(err)
	}
	err = ioutil.WriteFile(&quot;test.png&quot;, b, 0777)
	if err != nil {
		log.Fatal(err)
	}

}

&lt;!DOCTYPE html&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&quot;main&quot;&gt;
# 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}$
&lt;/div&gt;

&lt;script src=&quot;https://cdn.jsdelivr.net/npm/markdown-it-latex2img@0.0.6/dist/markdown-it-latex2img.min.js&quot;
    crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/markdown-it@11.0.0/dist/markdown-it.min.js&quot;
    crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;script&gt;
    var main = document.getElementById(&quot;main&quot;);
    var md = window.markdownit({ html: true });
    md.use(window.markdownitLatex2img, { style: &quot;filter: opacity(75%);transform:scale(0.75);text-align:center&quot; });
    var result = md.render(main.innerHTML);
    main.innerHTML = result;
&lt;/script&gt;
&lt;/body&gt;

`FullScreenshot()`函数在chromedp包中生成的截图太模糊了，我该如何改善它？
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?

答案1

得分: 2

这与您的机器配置无关。增加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

其他需要注意的事项：

  1. 在您的代码中，emulation.SetDeviceMetricsOverride(1920, 1080, 1.0, false).Do(chromeCTX)会返回chromedp.ErrInvalidContext错误。可以完全删除它。
  2. 在您的代码中，所有对chromedp.EmulateViewport的调用都传递了width: 0和height: 0的参数。应该将其包装在chromedp.ActionFunc中以获取更新后的width和height值。
英文:

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 (
	&quot;context&quot;
	&quot;log&quot;
	&quot;os&quot;

	&quot;github.com/chromedp/cdproto/emulation&quot;
	&quot;github.com/chromedp/chromedp&quot;
)

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`, &amp;width),
		chromedp.ActionFunc(func(ctx context.Context) error {
			return chromedp.EmulateViewport(width, 10).Do(ctx)
		}),
		chromedp.EvaluateAsDevTools(`document.documentElement.scrollHeight`, &amp;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(&amp;b, 100),
	)
	if err != nil {
		log.Fatal(err)
	}
	err = os.WriteFile(&quot;test.png&quot;, 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:

  1. In your code, emulation.SetDeviceMetricsOverride(1920, 1080, 1.0, false).Do(chromeCTX) returns an chromedp.ErrInvalidContext error. It could be removed completely.
  2. 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.

huangapple
  • 本文由 发表于 2023年6月20日 20:22:42
  • 转载请务必保留本文链接：https://go.coder-hub.com/76514650.html
  • chromedp
  • go
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定