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

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

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

问题

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

  1. func main() {
  3. 	chromeCTX, _ := chromedp.NewContext(context.Background())
  4. 	emulation.SetDeviceMetricsOverride(1920, 1080, 1.0, false).Do(chromeCTX)
  6. 	var width, height int64
  7. 	var b []byte
  8. 	err := chromedp.Run(chromeCTX,
  9. 		chromedp.EmulateViewport(10, 10),
  10. 		chromedp.Navigate(`The content of the file is in the code block below.html`),
  11. 		chromedp.EvaluateAsDevTools(`document.documentElement.scrollWidth`, &width),
  12. 		chromedp.EmulateViewport(width, 10),
  13. 		chromedp.EvaluateAsDevTools(`document.documentElement.scrollHeight`, &height),
  14. 		chromedp.EmulateViewport(width, height),
  15. 		chromedp.FullScreenshot(&b, 100),
  16. 	)
  17. 	if err != nil {
  18. 		log.Fatal(err)
  19. 	}
  20. 	err = ioutil.WriteFile("test.png", b, 0777)
  21. 	if err != nil {
  22. 		log.Fatal(err)
  23. 	}
  25. }
  1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="utf-8">
  4. </head>
  5. <body>
  6. <div id="main">
  7. # 123
  8. 123
  9. $\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}$
  10. </div>
  12. <script src="https://cdn.jsdelivr.net/npm/markdown-it-latex2img@0.0.6/dist/markdown-it-latex2img.min.js"
  13.     crossorigin="anonymous"></script>
  14. <script src="https://cdn.jsdelivr.net/npm/markdown-it@11.0.0/dist/markdown-it.min.js"
  15.     crossorigin="anonymous"></script>
  16. <script>
  17.     var main = document.getElementById("main");
  18.     var md = window.markdownit({ html: true });
  19.     md.use(window.markdownitLatex2img, { style: "filter: opacity(75%);transform:scale(0.75);text-align:center" });
  20.     var result = md.render(main.innerHTML);
  21.     main.innerHTML = result;
  22. </script>
  23. </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.

  1. func main() {
  3. 	chromeCTX, _ := chromedp.NewContext(context.Background())
  4. 	emulation.SetDeviceMetricsOverride(1920, 1080, 1.0, false).Do(chromeCTX)
  6. 	var width, height int64
  7. 	var b []byte
  8. 	err := chromedp.Run(chromeCTX,
  9. 		chromedp.EmulateViewport(10, 10),
  10. 		chromedp.Navigate(`The content of the file is in the code block below.html`),
  11. 		chromedp.EvaluateAsDevTools(`document.documentElement.scrollWidth`, &amp;width),
  12. 		chromedp.EmulateViewport(width, 10),
  13. 		chromedp.EvaluateAsDevTools(`document.documentElement.scrollHeight`, &amp;height),
  14. 		chromedp.EmulateViewport(width, height),
  15. 		chromedp.FullScreenshot(&amp;b, 100),
  16. 	)
  17. 	if err != nil {
  18. 		log.Fatal(err)
  19. 	}
  20. 	err = ioutil.WriteFile(&quot;test.png&quot;, b, 0777)
  21. 	if err != nil {
  22. 		log.Fatal(err)
  23. 	}
  25. }
  1. &lt;!DOCTYPE html&gt;
  2. &lt;head&gt;
  3. &lt;meta charset=&quot;utf-8&quot;&gt;
  4. &lt;/head&gt;
  5. &lt;body&gt;
  6. &lt;div id=&quot;main&quot;&gt;
  7. # 123
  8. 123
  9. $\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}$
  10. &lt;/div&gt;
  12. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/markdown-it-latex2img@0.0.6/dist/markdown-it-latex2img.min.js&quot;
  13.     crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  14. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/markdown-it@11.0.0/dist/markdown-it.min.js&quot;
  15.     crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  16. &lt;script&gt;
  17.     var main = document.getElementById(&quot;main&quot;);
  18.     var md = window.markdownit({ html: true });
  19.     md.use(window.markdownitLatex2img, { style: &quot;filter: opacity(75%);transform:scale(0.75);text-align:center&quot; });
  20.     var result = md.render(main.innerHTML);
  21.     main.innerHTML = result;
  22. &lt;/script&gt;
  23. &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会使图像显示更好。请参考下面的演示代码：

  1. package main
  3. import (
  4. 	"context"
  5. 	"log"
  6. 	"os"
  8. 	"github.com/chromedp/cdproto/emulation"
  9. 	"github.com/chromedp/chromedp"
  10. )
  12. func main() {
  13. 	ctx, cancel := chromedp.NewContext(context.Background(), chromedp.WithDebugf(log.Printf))
  14. 	defer cancel()
  16. 	var width, height int64
  17. 	var b []byte
  18. 	err := chromedp.Run(ctx,
  19. 		chromedp.EmulateViewport(10, 10),
  20. 		chromedp.Navigate(`The content of the file is in the code block below.html`),
  21. 		chromedp.EvaluateAsDevTools(`document.documentElement.scrollWidth`, &width),
  22. 		chromedp.ActionFunc(func(ctx context.Context) error {
  23. 			return chromedp.EmulateViewport(width, 10).Do(ctx)
  24. 		}),
  25. 		chromedp.EvaluateAsDevTools(`document.documentElement.scrollHeight`, &height),
  26. 		chromedp.ActionFunc(func(ctx context.Context) error {
  27. 			return chromedp.EmulateViewport(width, height, func(sdmop *emulation.SetDeviceMetricsOverrideParams, steep *emulation.SetTouchEmulationEnabledParams) {
  28. 				sdmop.DeviceScaleFactor = 3
  29. 			}).Do(ctx)
  30. 		}),
  31. 		chromedp.FullScreenshot(&b, 100),
  32. 	)
  33. 	if err != nil {
  34. 		log.Fatal(err)
  35. 	}
  36. 	err = os.WriteFile("test.png", b, 0o777)
  37. 	if err != nil {
  38. 		log.Fatal(err)
  39. 	}
  40. }

较大的DeviceScaleFactor会导致较大的图像：

  1. $ file *.png
  2. 7e9rfcQO.png: PNG image data, 797 x 144, 8-bit/color RGBA, non-interlaced
  3. 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:

  1. package main
  3. import (
  4. 	&quot;context&quot;
  5. 	&quot;log&quot;
  6. 	&quot;os&quot;
  8. 	&quot;github.com/chromedp/cdproto/emulation&quot;
  9. 	&quot;github.com/chromedp/chromedp&quot;
  10. )
  12. func main() {
  13. 	ctx, cancel := chromedp.NewContext(context.Background(), chromedp.WithDebugf(log.Printf))
  14. 	defer cancel()
  16. 	var width, height int64
  17. 	var b []byte
  18. 	err := chromedp.Run(ctx,
  19. 		chromedp.EmulateViewport(10, 10),
  20. 		chromedp.Navigate(`The content of the file is in the code block below.html`),
  21. 		chromedp.EvaluateAsDevTools(`document.documentElement.scrollWidth`, &amp;width),
  22. 		chromedp.ActionFunc(func(ctx context.Context) error {
  23. 			return chromedp.EmulateViewport(width, 10).Do(ctx)
  24. 		}),
  25. 		chromedp.EvaluateAsDevTools(`document.documentElement.scrollHeight`, &amp;height),
  26. 		chromedp.ActionFunc(func(ctx context.Context) error {
  27. 			return chromedp.EmulateViewport(width, height, func(sdmop *emulation.SetDeviceMetricsOverrideParams, steep *emulation.SetTouchEmulationEnabledParams) {
  28. 				sdmop.DeviceScaleFactor = 3
  29. 			}).Do(ctx)
  30. 		}),
  31. 		chromedp.FullScreenshot(&amp;b, 100),
  32. 	)
  33. 	if err != nil {
  34. 		log.Fatal(err)
  35. 	}
  36. 	err = os.WriteFile(&quot;test.png&quot;, b, 0o777)
  37. 	if err != nil {
  38. 		log.Fatal(err)
  39. 	}
  40. }

Larger DeviceScaleFactor results in larger image:

  1. $ file *.png
  2. 7e9rfcQO.png: PNG image data, 797 x 144, 8-bit/color RGBA, non-interlaced
  3. 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:

确定