


The screenshot generated by FullScreenshot() from the chromedp package is too blurry, how can I improve it?
Feb 14, 2024 pm 02:48 PMphp editor Yuzi has a question about the chromedp package that needs to be answered. The question is about the screenshot generated using FullScreenshot() being too blurry and an improved approach is needed. When using the chromedp package, the quality of the generated screenshots may not be as expected, which may be due to some incorrect configuration or parameter settings. Here are some possible improvements to help you get clearer screenshots.
Question content
As the title says, here is the result and my code. BTW, I'm 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/[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>
I thought maybe there was a dpi setting? Or is it because my machine is too weak? Unfortunately, I don't have any more resources to explore the truth. So please help me, how can I make the screenshot clearer?
Solution
It has nothing to do with the configuration of your machine. Increasing devicescalefactor
will make the image look better. See 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) } }
A larger devicescalefactor
will produce a 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 notes:
- In your code,
emulation.setdevicemetricsoverride(1920, 1080, 1.0, false).do(chromectx)
returns achromedp.errinvalidcontext
error. It can be removed completely. - In your code, all calls to
chromedp.emulateviewport
are passed with the parameterswidth: 0
andheight: 0
. This should be wrapped inchromedp.actionfunc
to get the updatedwidth
andheight
.
The above is the detailed content of The screenshot generated by FullScreenshot() from the chromedp package is too blurry, how can I improve it?. For more information, please follow other related articles on the PHP Chinese website!

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Go language pack import: What is the difference between underscore and without underscore?

How to implement short-term information transfer between pages in the Beego framework?

How do I write mock objects and stubs for testing in Go?

How can I use tracing tools to understand the execution flow of my Go applications?

How can I define custom type constraints for generics in Go?

How to write files in Go language conveniently?

How to convert MySQL query result List into a custom structure slice in Go language?

How do I write benchmarks that accurately reflect real-world performance in Go?
