如何拍摄装有.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的渲染方式（与画布上下文一起使用时）：

  

<强>限制

     

出于安全考虑，Gecko对SVG内容施加了一些限制   当它被用作图像时：

     

  
• 禁用JavaScript。
  
• 无法加载外部资源（例如图像，样式表），但如果通过BlobBuilder对象URL内联，则可以使用它们。   数据：URI。
  
• ：不呈现访问链接样式。
  
• 禁用平台本机窗口小部件样式（基于操作系统主题）。
  

     

请注意，上述限制特定于图像上下文;他们   直接查看SVG内容或嵌入SVG内容时不适用   通过＆lt; iframe＆gt;，＆lt; object＆gt;或＆lt; embed＆gt;作为文档元件。

虽然这提到Gecko它也适用于其他浏览器。

除此之外，您还可以在画布上使用SVG并将其作为图像提取。解决此问题的唯一方法（关于抓取快照，除非您想手动解析SVG内联外部内容）是将图像链接重定向到您的服务器并从那里加载页面和图像 - 这意味着您需要以某种方式预先 - 处理（转换）SVG文件。