问题标签 [canvg]

我可以使用 cannvg 导出我在 D3js 中创建的 svg。每当有 svg 的变换值时，导出的图像中就会出现一条灰线。如果我们删除灰线就消失了。（线以绿色圆圈显示）

这是我的 svg 代码

我正在使用 canvg 导出这个 svg。

该图在浏览器、Chorme、IE11、IE10 等上是相同且正确的......

在 IE 11 中，我按下一个按钮来创建 png 文件，结果是正确的。

在 IE 10 中，我按下按钮创建 png 文件，结果不正确，图形的虚线变为实线。

我不知道这个问题，有人可以帮助我吗？

IE 11：（_{来源：2.pik.vn）}

IE 10：（_{来源：2.pik.vn）}

这是我用来从 svg 转换为画布的代码：

我的应用程序中有一个 d3 图表，我想要的是截取图表。我正在使用 html2canvas.js 和 canvg.js 插件将 div 内容转换为 base64 字符串。我使用内联样式来绘制图表。我从另一篇文章中得到了这个解决方案。

我的图表中有矩形，我使用渐变色填充矩形，但是当我截取屏幕截图时，矩形的背景颜色不显示，请参见下面的图片↓↓。在搜索了一些解决方案后，我了解到 html2canvas 插件有一些限制，并且 canvg 在某些设计上也会有问题。

原始图表

截屏

我可以用我所拥有的东西解决这个问题，或者有什么更好的截图插件吗？因为如果我使用下面的代码，我将无法获得确切的屏幕截图，而且清晰度也很差。

我正在尝试将画布从网页保存到文件中。画布非常复杂，由几个图像（几个半透明的 .png 文件、2 个 svg 元素和 4 个其他画布）构建而成，无论我如何尝试保存它，使用canvas.toDataURL()方法或使用domtoimage [库] （https://github.com/tsayen/dom-to-image）或canvas2image或fileSaver或canvasToBLob库 - 结果是相同的：没有 svg（和<image>内部元素）部分的图像。所以我只得到那些用画布建造的零件。我读到了“受污染”的画布，但图像主机服务器与网页相同。

此外，我很困惑，因为如果我通过单击 RCM 并选择“将图像另存为”功能来保存画布 - 它会准确地保存我需要的东西 - 完整的图片。

整个代码很大，保存选项也不一样，所以我在这里只放一个保存选项：

左边的图片是我在浏览器中使用‘ save image as ’功能得到的，右边是js通过toBlob保存的图片

将很高兴获得有关如何自动保存完整图像的任何建议:)

我正在使用 html2canvas 和 canvg 插件将角度 nvd3 图表转换为 svg，但是当我将饼图转换为 png 时，我看起来与图表相同，但是当我转换折线图或面积图时，它的背景变为黑色，并且一些圆圈淹没在图像上。我的代码是

帮帮我，伙计们。提前致谢

我一直在处理这个问题，但我似乎无法让它发挥作用。Onclick 到生成的 png 图像是空的。请看下面的代码......

不知道下一步该去哪里。我只需要将图像转换为 png，然后将其保存到服务器。测试下载版本时，生成的 png 为空白。请注意，我正在使用... canvg.js（包括 rgbcolor.js）和 html2canvas.svg.js

提前致谢！

谁能告诉我为什么我的 svg to png 没有下载？我究竟做错了什么？我似乎找不到如何将我的 svg 下载到 png 的解决方案。是我的库还是我的代码？

我有一个嵌入其他 SVG 的 SVG。当我按照此处所述使用 canvg 时，仅将原始 SVG 上的组件转换为画布，并省略链接的组件。有什么解决办法吗？

我目前正在尝试在网站上创建一个“屏幕截图”。为此，我使用html2canvas。问题是 html2canvas svg 图像不会在生成的画布中呈现。作为一种解决方法，我目前正在尝试使用canvg在创建屏幕截图之前从 svg 创建一个画布。

现在我面临的问题是，画布不是以完整的宽度和高度创建的，而是在 mousemove 上增长，即使没有 mousemove 侦听器或任何存在的东西。

我的问题是如何在不增长的情况下获得原始 svg 大小的画布？

这个问题应该可以在这个片段中重现：

我需要将 SVG 的可见区域转换为静态图像以用于打印和类似目的。我从阅读中得知，该方法应该是首先使用 将 SVG 转换为画布canvg，然后使用 将画布转换为图像canvas.toDataURL。我能够完成这些基本要求，但是我的 viewbox 比我的 SVG 小得多，因此裁剪和缩放成为问题，这就是我目前遇到的问题。 我的想法是在转换为用于将未缩放的画布裁剪到 SVG 视图框定义的区域的图像之前插入额外的两个步骤。canvasContext.drawImage(...)最后一步对我不起作用：我无法裁剪图像并保持当前比例。 然后我打算使用pica.resizeCanvas以实现图像的高质量缩放（使其适合可打印页面）。

在进入代码之前，问题是：

• 总体方法是否合理？
• canvasContext.drawImage(...)图像最终缩放或裁剪不正确，我做错了什么？目标是不应用缩放，而是裁剪一些多余的空白区域。

步骤总结

• 复制svg到canvas使用canvg。这行得通。
  • 不应用缩放
  • 偏移量用于将图像移动到左上角，为将来裁剪剩余的空白区域（右下区域）做准备。
• 获取新创建的canvas并将裁剪区域绘制到辅助canvas使用canvasContext.drawImage. 这失败了。画布尺寸错误但缩放正确（即没有）或画布尺寸正确但缩放错误（放大）。
• 用于pica.resizeCanvas以最小的质量损失应用缩放。 还没有真正尝试过。
• 用于canvasContext.toDataURL(...)将画布转换为png. 这行得通。

代码