chromedp 套件中的 FullScreenshot() 產生的螢幕截圖太模糊，我該如何改進？-Golang-PHP中文網

首頁

後端開發

Golang

chromedp 套件中的 FullScreenshot() 產生的螢幕截圖太模糊，我該如何改進？

PHPz

Feb 14, 2024 pm 02:48 PM

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

php小編柚子有一個關於chromedp套件的問題需要解答。問題是關於使用FullScreenshot()產生的螢幕截圖太模糊，需要改進的方法。在使用chromedp套件時，產生的螢幕截圖品質可能不如預期，這可能是由於一些配置或參數設定不正確導致的。以下將介紹一些可能的改進方法，幫助你得到更清晰的螢幕截圖。

問題內容

如標題所示，這是結果和我的程式碼。順便說一句，我用的是一台非常低階的機器。

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>

我想也許有一個 dpi 的設定？還是因為我的機器太弱了？不幸的是，我沒有更多的資源來探索真相。所以請各位幫忙，怎樣才能讓截圖更清晰？

解決方法

與您機器的設定無關。增加 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。

以上是chromedp 套件中的 FullScreenshot() 產生的螢幕截圖太模糊，我該如何改進？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：stackoverflow。如有侵權，請聯絡admin@php.cn刪除

Golang的影響：速度，效率和簡單性Apr 14, 2025 am 12:11 AM

goimpactsdevelopmentpositationality throughspeed，效率和模擬性。 1）速度：gocompilesquicklyandrunseff，IdealforlargeProjects.2）效率：效率：ITScomprehenSevestAndardArdardArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdEcceSteral Depentencies，增強的Depleflovelmentimency.3）簡單性。

C和Golang：表演至關重要時Apr 13, 2025 am 12:11 AM

C 更適合需要直接控制硬件資源和高性能優化的場景，而Golang更適合需要快速開發和高並發處理的場景。 1.C 的優勢在於其接近硬件的特性和高度的優化能力，適合遊戲開發等高性能需求。 2.Golang的優勢在於其簡潔的語法和天然的並發支持，適合高並發服務開發。

Golang行動：現實世界中的示例和應用程序Apr 12, 2025 am 12:11 AM

Golang在实际应用中表现出色，以简洁、高效和并发性著称。1)通过Goroutines和Channels实现并发编程，2)利用接口和多态编写灵活代码，3)使用net/http包简化网络编程，4)构建高效并发爬虫，5)通过工具和最佳实践进行调试和优化。

Golang：Go編程語言解釋了Apr 10, 2025 am 11:18 AM

Go語言的核心特性包括垃圾回收、靜態鏈接和並發支持。 1.Go語言的並發模型通過goroutine和channel實現高效並發編程。 2.接口和多態性通過實現接口方法，使得不同類型可以統一處理。 3.基本用法展示了函數定義和調用的高效性。 4.高級用法中，切片提供了動態調整大小的強大功能。 5.常見錯誤如競態條件可以通過gotest-race檢測並解決。 6.性能優化通過sync.Pool重用對象，減少垃圾回收壓力。