英文:
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>
我猜可能有一个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`, &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>
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
其他需要注意的事项:
- 在您的代码中,
emulation.SetDeviceMetricsOverride(1920, 1080, 1.0, false).Do(chromeCTX)
会返回chromedp.ErrInvalidContext
错误。可以完全删除它。 - 在您的代码中,所有对
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 (
"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)
}
}
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:
- In your code,
emulation.SetDeviceMetricsOverride(1920, 1080, 1.0, false).Do(chromeCTX)
returns anchromedp.ErrInvalidContext
error. It could be removed completely. - In your code, all the calls to
chromedp.EmulateViewport
are passed with parameterswidth: 0
andheight: 0
. It should be wrapped in achromedp.ActionFunc
to get the updatedwidth
andheight
.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论