導出高分辨率瀏覽器截圖

Question

對於我一直從事的 Blazor WASM 項目，我使用了這個名為Blazor Diagrams的偉大開源項目。 客戶希望我導出圖表的屏幕截圖，但要注意的是屏幕截圖應該是圖表的全分辨率，這幾乎總是比瀏覽器 window 的分辨率更高。例如，假設 div 包含圖表寬度為 900 像素以適合瀏覽器，但整個圖表寬度為 2500 像素。 我想拍攝一張 2500 像素寬的圖像。

我研究了各種選擇，例如

• html2畫布
• 獲取顯示媒體

Html2canvas 不能很好地與 Blazor 配合使用，如果我理解正確的話，getDisplayMedia 將是用於像素捕獲的像素。

由於保密原因，我認為我們無法使用第 3 方 API，所以我想知道我的選擇是什么。

Answer 1

大多數（如果不是全部）javascript 屏幕到圖像，Dom 到圖像庫缺乏完整的 svg 支持，並且與 css 等有一些怪癖。最好是與劇作家或 bunit 一起發揮創意，在舞台環境中獲取 output html 以獲得最佳效果結果。 目前我們遇到了所有提到的問題，但已經以其他方式解決了它，沒有/最小 javascript 依賴項。

使用 Blazor 服務器端，webassembly 可能是不同的情況

Answer 2

萬一有人遇到這個並發現這很有用，這就是我所做的。 我的項目是托管在 IIS 服務器上的 Blazor WASM。

• 創建了一個處理 Playwright 邏輯的控制台應用程序
• 創建了一個 API 端點，當它被點擊時會啟動控制台應用程序。
• 為我的圖表創建了一個特殊的查看頁面，它進行了一些數學運算來設置容器 div 的大小，以確保所有圖表都可見。
• 使用 playwright 獲取該特定 div 的屏幕截圖。

IIS的一些小技巧

在我們的場景中，我最終將控制台應用程序 exe 放在根網站文件夾中，因為 Node 需要讀/寫訪問權限並且在子文件夾中拋出錯誤。

我使用以下代碼在首次運行時僅安裝 chrome 瀏覽器。 這樣，所有編劇代碼都位於我的 Diagram Export 應用程序文件夾中。

string imagesFolderPath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "images");
string browserFolderPath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "browser");
if (!Directory.Exists(imagesFolderPath))
{
    Directory.CreateDirectory(imagesFolderPath);
    Console.WriteLine("Created images folder", imagesFolderPath);
}
if (!Directory.Exists(browserFolderPath))
{
    Directory.CreateDirectory(browserFolderPath);
    Console.WriteLine("Created browser'{0}'", browserFolderPath);
}

Console.WriteLine("Checking dependencies");
Environment.SetEnvironmentVariable("PLAYWRIGHT_BROWSERS_PATH", browserFolderPath);
Environment.SetEnvironmentVariable("PLAYWRIGHT_NODEJS_PATH", Path.Combine(AppDomain.CurrentDomain.BaseDirectory, ".playwright\\node\\win32_x64\\node.exe"));

Microsoft.Playwright.Program.Main(new[] { "install","chromium" });

必須使用 playwright 的自動等待功能來確保在截取屏幕截圖之前頁面已完全呈現。