Heim > Artikel > Backend-Entwicklung > Der von FullScreenshot() aus dem chromedp-Paket generierte Screenshot ist zu verschwommen. Wie kann ich ihn verbessern?
Der von FullScreenshot() aus dem chromedp-Paket generierte Screenshot ist zu verschwommen. Wie kann ich ihn verbessern?
- PHPznach vorne
- 2024-02-14 14:48:191257Durchsuche
php-Editor Yuzi hat eine Frage zum chromedp-Paket, die beantwortet werden muss. Die Frage ist, ob der mit FullScreenshot() erstellte Screenshot zu unscharf ist und ein verbesserter Ansatz erforderlich ist. Bei Verwendung des chromedp-Pakets ist die Qualität der generierten Screenshots möglicherweise nicht wie erwartet, was an einer falschen Konfiguration oder Parametereinstellungen liegen kann. Hier sind einige mögliche Verbesserungen, die Ihnen helfen sollen, klarere Screenshots zu erhalten.
Frageninhalt
Wie der Titel schon sagt, hier ist das Ergebnis und mein Code. Ich verwende übrigens eine sehr preisgünstige Maschine.
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>
Ich dachte, es gäbe vielleicht eine dpi-Einstellung? Oder liegt es daran, dass meine Maschine zu schwach ist? Leider habe ich keine Ressourcen mehr, um die Wahrheit herauszufinden. Bitte helfen Sie mir, wie kann ich den Screenshot klarer machen?
Die Lösung
hat nichts mit der Konfiguration Ihrer Maschine zu tun. Durch das Hinzufügen von devicescalefactor sieht das Bild besser aus. Siehe Demo unten:
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)
}
}
Ein größeres devicescalefactor führt zu einem größeren Bild:
$ 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
Andere Hinweise:
- In Ihrem Code ist
emulation.setdevicemetricsoverride(1920, 1080, 1.0, false).do(chromectx)返回chromedp.errinvalidcontextfalsch. Es kann vollständig entfernt werden. - Machen Sie in Ihrem Code
chromedp.emulateviewport的所有调用均通过参数width: 0和height: 0传递。应将其包装在chromedp.actionfunc中以获取更新的width和heightaus.
Das obige ist der detaillierte Inhalt vonDer von FullScreenshot() aus dem chromedp-Paket generierte Screenshot ist zu verschwommen. Wie kann ich ihn verbessern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!