chromedp 套件中的 FullScreenshot() 產生的螢幕截圖太模糊，我該如何改進？
- PHPz轉載
- 2024-02-14 14:48:191309瀏覽
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 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>
我想也許有一個 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.com。如有侵權，請聯絡admin@php.cn刪除