Javascript 如何拍摄加载了.svg图像的div或canvas的快照？

我想拍摄加载了.svg图像的div或canvas的快照。 例如，我尝试了html2canvas，因为它不包含svg图像。刚刚拍摄了其他页面数据的快照。

您可以（-底部副本是包含svg的提取画布），但有一个例外：

如果SVG有任何外部引用，则无法提取图像。如果SVG使用图像，则需要使用

Blob

或

数据uri

内联图像。否则保安会罢工

其他需要注意的事项（当与画布上下文一起使用时）将影响SVG的呈现方式：

限制

出于安全目的，Gecko对SVG内容进行了一些限制 当它被用作图像时：

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

注意，上述限制特定于图像上下文；他们 直接查看SVG内容或嵌入SVG内容时不适用 通过、或元素作为文档

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

---

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

请提供您的代码。如果是jsfiddle会更好？@markE-oops，我的错。我链接的示例也是为完全不同的东西制作的，我只是想展示可以抓取一个绘制了svg的画布（对于foreignObject来说不是这样）。这个例子可能更适合：