如何拍攝帶有.svg圖像的div或canvas的快照？

Question

我想拍攝帶有.svg圖像的div或canvas的快照。 例如我已經嘗試過html2canvas，因爲這不包括svg圖像。只是拍了其他頁面數據的快照。

Answer 1

您可以（as shown in this demo - 下副本是包含SVG提取的帆布），但有一個例外：

不能提取圖像如果SVG有任何外部引用。如果SVG使用圖片，則需要使用Blob或data-uri內聯。否則安全將會罷工。

其他的事情（從this article），這將影響到SVG的呈現方式（用帆布語境中使用）注意：

限制

爲了安全起見，蛤蚧地的一些限制在SVG內容 當它被用作圖像時：

• JavaScript已禁用。
• 無法加載外部資源（例如圖像，樣式表），但如果通過BlobBuilder對象URL或 data：URI內聯，則可以使用它們。
• ：未呈現訪問鏈接樣式。
• 禁用平臺本機構件樣式（基於操作系統主題）。

請注意，上述限制是特定於圖像上下文;它們 當SVG內容直接觀察不適用，或當它經由<IFRAME>，<對象>，或<嵌入 作爲文檔嵌入>元件。

雖然這提到壁虎它也適用於其他瀏覽器。

除此之外，您可以在畫布上使用SVG並將其作爲圖像提取。解決這個問題的唯一方法（關於抓取快照，除非你想手動解析SVG來內聯外部內容），就是將圖像鏈接重定向到服務器，並從那裏加載頁面和圖像 - 這意味着你需要預先處理（轉換）SVG文件。