Rumah  >  Artikel  >  pembangunan bahagian belakang  >  Tangkapan skrin yang dijana oleh FullScreenshot() daripada pakej chromedp terlalu kabur, bagaimana saya boleh memperbaikinya?

Tangkapan skrin yang dijana oleh FullScreenshot() daripada pakej chromedp terlalu kabur, bagaimana saya boleh memperbaikinya?

PHPz
PHPzke hadapan
2024-02-14 14:48:191310semak imbas

chromedp 包中的 FullScreenshot() 生成的屏幕截图太模糊,我该如何改进?

php editor Yuzi ada soalan tentang pakej chromedp yang perlu dijawab. Persoalannya ialah mengenai tangkapan skrin yang dijana menggunakan FullScreenshot() yang terlalu kabur dan pendekatan yang lebih baik diperlukan. Apabila menggunakan pakej chromedp, kualiti tangkapan skrin yang dijana mungkin tidak seperti yang diharapkan, yang mungkin disebabkan oleh beberapa konfigurasi atau tetapan parameter yang salah. Berikut ialah beberapa peningkatan yang mungkin untuk membantu anda mendapatkan tangkapan skrin yang lebih jelas.

Kandungan soalan

Seperti tajuknya, inilah hasilnya dan kod saya. By the way, saya menggunakan mesin yang sangat rendah.

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&#160;protected]/dist/markdown-it-latex2img.min.js"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email&#160;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>

Saya fikir mungkin terdapat tetapan dpi? Atau adakah kerana mesin saya terlalu lemah? Malangnya, saya tidak mempunyai sumber lagi untuk meneroka kebenaran. Jadi tolong bantu saya, bagaimana saya boleh membuat tangkapan skrin lebih jelas?

Penyelesaian

tidak ada kena mengena dengan konfigurasi mesin anda. Menambah devicescalefactor akan menjadikan imej kelihatan lebih baik. Lihat demo di bawah:

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 yang lebih besar akan menghasilkan imej yang lebih besar:

$ 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

Nota lain:

  1. Dalam kod anda, emulation.setdevicemetricsoverride(1920, 1080, 1.0, false).do(chromectx) 返回 chromedp.errinvalidcontext salah. Ia boleh dikeluarkan sepenuhnya.
  2. Dalam kod anda, lakukan chromedp.emulateviewport 的所有调用均通过参数 width: 0height: 0 传递。应将其包装在 chromedp.actionfunc 中以获取更新的 widthheight.

Atas ialah kandungan terperinci Tangkapan skrin yang dijana oleh FullScreenshot() daripada pakej chromedp terlalu kabur, bagaimana saya boleh memperbaikinya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Artikel ini dikembalikan pada:stackoverflow.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam