microsim-screen-capture

此工具為動態 JavaScript 視覺化內容（特別是 MicroSim）提供強大且自動化的截圖工作流程。它解決了在非互動式環境中呈現網頁內容的常見問題，確保如 p5.js、vis-network.js 和 Chart.js 等函式庫繪製的複雜圖形在截圖前能完整載入。透過 Google Chrome 無頭模式，此工具確保用於社群媒體元資料（og:image）、教學文件及品質保證的視覺資產達到一致、專業且效能優化的水準。

• 透過 Chrome 無頭模式自動擷取動態 HTML 內容，支援包括 --headless=new 在內的現代化瀏覽器旗標。

• 智慧處理非同步渲染，允許針對複雜視覺化調整逾時設定與渲染預算。

• 與 MicroSim 目錄結構完美整合，確保截圖與 main.html 正確對應並以標準格式儲存。

• 強化瀏覽器安全性繞過機制，特別針對外部 CDN 資源載入進行設計，這對於互動式教育模擬至關重要。

• 支援品質分數對齊，直接與 microsim-standardization 工作流程配合，確保教育教材達成高品質標準。

• 使用此工具產生互動式教科書的社群媒體預覽，以提升視覺參與度。

• 為學術檔案或數位作品集製作歸檔截圖，協助建構與維護智慧教科書。

• 整合至 CI/CD 管線中，以驗證互動式模擬在不同視覺狀態下的正確渲染效果。

• 實務限制：請確保 Chrome 或 Chromium 已正確安裝並於環境路徑中參照。若截圖顯示為空白，請增加逾時參數（timeout）以適應網路延遲或函式庫載入時間。若 file:// 協定限制導致資源載入失敗，建議於本機開發時使用本地伺服器。