一個名為 SnapDOM 的新 JavaScript 函式庫正在網頁開發社群中引起轟動，因為它能夠以驚人的速度和精確度將 HTML 元素擷取為圖像。這個工具承諾解決現有解決方案如 html2canvas 長期存在的限制，提供更好的效能和更準確的渲染結果。
透過 SVG foreignObject 的技術創新
SnapDOM 採用獨特的方法來擷取 HTML 元素，利用 SVG 的 foreignObject 功能。該函式庫複製 DOM 元素並將它們嵌入到 SVG 容器中，這種方法在現代瀏覽器中獲得了穩固的支援。這項技術讓工具在擷取複雜網頁元素時能夠保持高保真度，包括那些具有偽元素、shadow DOM 內容和自訂網頁字體的元素。
開發者實作了幾項最佳化來增強效能，包括內部 CSS 類別生成以避免重複屬性，以及防止重新處理已處理樣式的快取系統。這些改進對函式庫相較於傳統解決方案的速度優勢有顯著貢獻。
註：foreignObject 是一個 SVG 元素，允許在 SVG 文件中嵌入外部內容如 HTML。
支援功能：
- 偽元素擷取
- Shadow DOM 內容
- 透過 embedFonts 選項支援網頁字體
- CSS clip-path 和 mix-blend-mode
- Canvas 元素
- 完整頁面擷取
效能基準測試顯示明顯優勢
社群測試顯示， SnapDOM 不僅提供更快的擷取時間，與 html2canvas 相比也產生更準確的結果。使用者回報 SnapDOM 可以達到低至 13 毫秒的渲染時間，這在理論上為即時應用程式開啟了可能性，例如從網頁進行 60fps 影片擷取。
速度改進在涉及 CSS 框架、自訂字體和進階樣式功能的複雜場景中特別顯著。早期採用者觀察到，雖然 html2canvas 有時會產生視覺瑕疵，但 SnapDOM 在不同瀏覽器和作業系統中都能保持渲染準確性。
效能比較：
- SnapDOM：渲染時間低至 13 毫秒
- html2canvas：效能較慢，偶爾出現視覺瑕疵
- 理論能力：可從網頁進行 60fps 影片擷取
多樣化的匯出選項和未來發展
與許多專注於點陣圖像輸出的擷取函式庫不同， SnapDOM 預設為 SVG 格式，同時支援多種匯出選項，包括 PNG、JPG 和 WebP。這種靈活性使其在設計系統元件的截圖測試中特別有價值，其中向量格式可能比傳統點陣圖像更有效率。
「預設的擷取輸出是 svg dataurl。但還有許多其他匯出選項。這個函式庫是作為另一個名為 Zumly 的專案的內部工具而製作的，該專案是一個可縮放引擎，而 svg 格式是我找到的最快輸出方式。」
開發者已經規劃了一個外掛系統，將允許對所有擷取階段進行細粒度控制，可能啟用透過連續擷取序列生成動畫等功能。這種可擴展性可能使 SnapDOM 適用於超越簡單元素擷取的更廣泛應用範圍。
匯出格式：
- SVG（預設輸出格式）
- PNG
- JPG
- WebP
結論
SnapDOM 代表了網頁元素擷取技術的重大進步，解決了困擾現有解決方案的效能和準確性問題。憑藉其創新的基於 SVG 的方法和計劃中的外掛架構，該函式庫似乎已經準備好成為需要可靠 HTML 轉圖像轉換功能的開發者的首選。
參考資料：SnapDOM 示範畫廊