html2canvas 不转换 svg 图像标签

Question

我正在使用 html2canvas.js 将带有一些 svg 标签的 html 元素转换为图像。转换对于所有元素都工作正常除了 svg 图像标签，如下 -

<image y="2" transform="translate(0,0)" height="28" width="28" x="28" xlink:href="/content/adv/Control/2.png" display="block"></image>

svg 图像标签需要任何特殊处理才能与 html2canvas 一起使用吗？

浏览器中实际元素的屏幕截图和使用 html2canvas 生成的屏幕截图 -

Answer 1

@manjuv 当您想使用

html2canvas

将带有 SVG 图像的 HTML 元素转换为图像时，由于处理

html2canvas

的一些限制，您可能会遇到一些问题。

同样重要的是，您首先检查 CORS 问题。

如果镜像托管在不同的域上，请确保处理潜在的 CORS（跨源资源共享）问题。

另一个重要的点是，您应该尝试将图像作为 base64 编码的数据 URI 直接嵌入到 SVG 中。

此外，

html2canvas

在渲染某些 SVG 功能时可能会受到限制。作为替代方案，您可以尝试单独光栅化 SVG 图像，并将生成的光栅图像包含在 HTML 中。 例如，

<img src="/content/adv/Control/2.png" alt="Rasterized Image">

所以，总的来说，不能说将 SVG 图像转换为图像总是可能的。

希望对您的理解有所帮助。