不渲染.svg格式的html2canvas图像

html2canvas是一个用于将HTML元素转换为Canvas的JavaScript库，它通常用于截取和导出网页内容的图像。然而，html2canvas在默认情况下不支持渲染SVG格式的图像。

要解决这个问题，你可以使用一个名为canvg的JavaScript库，它可以将SVG转换为Canvas。以下是一个示例代码，演示如何使用html2canvas和canvg来渲染SVG格式的图像：

首先，确保你已经引入了html2canvas和canvg的JavaScript文件。

<!DOCTYPE html>
<html>
<head>
  <script src="html2canvas.js"></script>
  <script src="canvg.js"></script>
</head>
<body>
  <div id="svgContainer">
    <!-- 这里放置你的SVG代码 -->
    <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
      <rect x="50" y="50" width="100" height="100" fill="red" />
    </svg>
  </div>

  <script>
    // 获取SVG元素
    var svgElement = document.querySelector("#svgContainer svg");

    // 创建一个Canvas元素
    var canvas = document.createElement("canvas");
    canvas.width = svgElement.width.baseVal.value;
    canvas.height = svgElement.height.baseVal.value;

    // 使用canvg将SVG转换为Canvas
    canvg(canvas, svgElement.outerHTML);

    // 使用html2canvas将Canvas转换为图像
    html2canvas(canvas).then(function (canvas) {
      // 将Canvas添加到页面中
      document.body.appendChild(canvas);
    });
  </script>
</body>
</html>

在上述示例中，我们首先获取SVG元素，并创建一个Canvas元素，大小与SVG元素相同。然后，使用canvg函数将SVG转换为Canvas。最后，使用html2canvas函数将Canvas转换为图像，并将其添加到页面中。

请确保你已经正确引入了html2canvas和canvg的JavaScript文件，并将SVG代码放置在svgContainer元素中。

这样，你就可以使用html2canvas和canvg来渲染和导出SVG格式的图像了。

页面内容是否对你有帮助？

有帮助

没帮助

不渲染.svg格式的html2canvas图像

、、、

当我们使用html2canvas进行屏幕截图时，带有.svg扩展的图像将无法正确渲染。我尝试过提供allowTaint:true选项，但它仍然不起作用。代码片段：</div> html2canvas($(".myDiv")

浏览 27提问于2017-08-31得票数 3

5回答

到画布javascript的html和Svg

、、、、

;margin-left:10px;"></div>这是我的html代码。我想转换它的画布图像。}我使用html2canvas插件将其转换为图像，但它不显示svg。我解决了转换svg tp画布的问题，但是现在html2canvas不工作了

浏览 0提问于2013-08-16得票数 11

2回答

如何通过html2canvas展示svg QR？

、、、

我有一个通过fetch(https://api.qr-code-generator.com/v1...)生成的二维码当我得到JPG或PNG格式的图像时，我尝试在下载之前渲染它作为canva，通过 html2canvas800, scrollX: 0, document.body.appendChild(canvas) }); canva是好的，但缺少QR

浏览 16提问于2020-07-15得票数 0

1回答

Javascript -将带有SVG的HTML div转换为图像

、、、

当使用Highcharts导出时，我无法添加包含图表的外部div。使用最新版本的html2canvas修复了这个问题，但是输出略有不同：<e

浏览 1提问于2015-11-08得票数 0

回答已采纳

2回答

html2canvas.js未捕获动态生成内容的图像

、、、

我正在使用vivagraphs生成动态svg元素，但是当我单击capture按钮时，没有节点和边显示。脚本是这样的：//var testdiv = document.getElementById("testdiv"); html2canvas($("#graph1"), { onrendered: function(ca

浏览 2提问于2014-04-09得票数 2

2回答

如何将DIV内容发送到html5 CANVAS

、、、

是否可以将div的内容“绘制”到画布上……我已经用css做了div操作，但是需要画布用.dataToURL函数将内容“保存”到jpg。提前感谢

浏览 2提问于2011-10-05得票数 9

回答已采纳

1回答

如何用html2canvas实现两幅图像到图像的转换

、

我有一个简单的div，里面有两个图像，我需要用html2canvas库把它渲染成一个新的图像。这两个图像都是PNG格式的，以便重叠，实际上它是在模板上工作，但在我无法通过html2canvas将其渲染为单个图像后。它在我的项目中使用的html2canvas库，实际上我在它的其他部分也成功地使用了它。基本上代码

浏览 11提问于2019-07-22得票数 0

1回答

html2canvas，将多个元素组合成一个pdf

、、、

我有一个网页，我想渲染为pdf的一部分，我有几个不同的部分，我想拼凑起来，看起来像这样：我可以用html2canvas抓取这张图片，然后用jsPDF把它做成pdf格式，但是它太大了，而且它的末端被截断了。我只想将图作为图像抓取，然后将其余的表作为文本添加。所以它看起来就像： [<e

浏览 7提问于2017-09-09得票数 2

1回答

Html2canvas不支持svg格式文件。Html2canvas不支持某些css3属性，如transform属性

我的公司使用的是screenshot框架，但是它不支持html2canvas格式，并且对新的CSS属性不友好，比如变换，而且椭圆的形状有时会与原始图像不一致。没有新的开源框架来支持这些需求。没有框架可以用屏幕截图的功能来取代html2canvas框架。我的英语不好，我用的是翻译，谢谢

浏览 5提问于2017-12-15得票数 1

3回答

如何将缩放的SVG渲染到QImage？

、、

在QtSvg模块中有一个QSvgRenderer类，可以将图像渲染到QPaintDevice上。这个可以是QImage。在这种情况下，我们将创建：但是如何从SVG渲染器渲染到不同大小的由于SVG格式的图像可以在不损失质量的情况下缩放，是否可以使

浏览 3提问于2011-12-18得票数 26

1回答

SVG未出现在屏幕截图中

、

我遵循了这里的教程：https://forge.autodesk.com/blog/create-pushpin-markup-svg 我已经成功地实现了svg图像作为我的查看器的一部分，将它们绑定到查看器事件的重绘中但是我随后使用了查看器的截图功能。这导致了在没有svg标记的情况下获得屏幕截图。但是，在将绘制的线条等标记添加到覆盖(覆盖场景)时，这些标记仍

浏览 13提问于2019-04-15得票数 0

1回答

如何转换为jpg并下载包含高图表和动态生成的html表的div？

、、、

我想将div的内容转换并下载为jpeg。该div包含2.高图表然后我已经用了两个插件.Canvas2Image 使用这两个插件，我成功地将div转换并下载到jpeg映像，但问题是表格在图像中显示，在高图表位置，它对应的宽度和高度的空白，一些值正在出现，但列没有显示。

浏览 2提问于2013-11-04得票数 0

回答已采纳

1回答

html2canvas可以在页面中呈现svg吗？

、

我正在使用html2canvas创建一个包含SVG的超文本标记语言页面的‘屏幕截图’。一切看起来都很好，除了元素。我知道在画布中渲染SVG应该是可能的；PhantomJS、fabric.js和CanVG都做到了。这是html2canvas不支持的吗？或者我做错了什么，这应该是可行的？如果还没有实现，扩展html2canvas的最佳方式是什么(使用canvg)？

浏览 2提问于2013-01-05得票数 10

回答已采纳

1回答

如何知道SVG何时完成渲染？

、、

我正在尝试将一堆包含svg图形的html页面导出到图像中。我使用React呈现所有内容，使用html2canvas转换页面，但问题是很少呈现图形。当我在渲染后添加超时时，它工作得很好。但是我正在一个接一个地渲染很多页面。固定的超时可能引入不必要的延迟，或者(更糟糕的)阻止非常复杂的svg的呈现。我认为这是因为svgs DOM已经加载，但总体上还没有完成渲染。有没

浏览 63提问于2021-05-03得票数 1

1回答

IE 8/9中的变换矩阵问题

、、、、

我试图在我的网页上得到SVG对象的转换矩阵。下面是我使用的当前语句，以确保由四个CSS转换属性中的一个获取该语句：我的问题是(和我所做的大多数事情一样) IE10、Chrome和FireFox都能很好地找到一个矩阵，但IE8/9却并非如此。在这里，您可以看到在

浏览 2提问于2013-12-31得票数 0

回答已采纳

2回答

html2canvas不打印jsPlumb连接器

、、

如何打印jsPlumb生成的SVG元素。已知通过jsPlumb获取所有SVG元素是通过以下代码检索的：所有连接器都是SVG元素：html2canvas(uiJsPlumbConnectors).the

浏览 2提问于2015-06-17得票数 2

回答已采纳

1回答

如何使用Batik svggen将SVG图像嵌入到另一个SVG图像中？

、、、

我正在使用Java Graphics2D相关的库以编程方式生成一个大图像。我使用了Batik的SVGGraphics2D类来允许渲染到SVG。我的挑战是，我有一组已经是SVG格式的图标，我想将它们嵌入到较大的图像中。基于Batik文档，我了解了如何使用ImageTranscoder将图标SVG文件带入Graphics2D环境。但是，此过程会将SVG文件栅格化并将

浏览 14提问于2013-08-31得票数 1

2回答

html2canvas未正确显示表单元素

、

我正在使用React和Html2Canvas来捕获单击按钮时的表单。该表单有四个select节点。Html2Canvas将表单另存为图像，但其中的selects将在渲染的图像中显示第一个选项。我想知道我是否在html2canvas config或react中错误地配置了它。async: true, logging: falselet input = this.

浏览 58提问于2019-03-13得票数 0

1回答