-1

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

4

1 回答 1

0

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

如果 SVG 有任何外部引用，则无法提取图像。如果 SVG 使用图像，则需要使用 aBlob或data-uri. 否则安全将罢工。

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

限制

出于安全考虑，Gecko 在将 SVG 内容用作图像时对其设置了一些限制：

  • JavaScript 被禁用。
  • 无法加载外部资源（例如图像、样式表），但如果通过 BlobBuilder 对象 URL 或 data: URI 内联，则可以使用它们。
  • :visited-link 样式不会被渲染。
  • 平台原生小部件样式（基于 OS 主题）已禁用。

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

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

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

于 2013-11-04T18:16:35.793 回答