问题标签 [canvg]

美好的一天，我亲爱的朋友们。我想从 lealfet 地图创建 png 文件。我使用 html2canvas 库，传单地图图块和其他元素极大地转换为 png，但不是 svg-elements(offsets)。我知道，有一些代码可以将所有 svg 元素重绘到画布（

但这对我来说是个坏方法，因为当我更改时，所有 svg 元素都会闪烁...

那么...如何使用 CANVG 将传单 svg 多边形转换为画布？这是我用 svg 元素的偏移量创建 png 的控件

HTML：

我有以下代码并使用它来检索 D3 图像以在 PDF 文件中使用。在我在 Microsoft Edge 上尝试之前，它一直运行良好。任何人都遇到过这个问题或对如何解决它有建议。基本上，图像以黑色中心返回。

使用 IE 的顶部图像。使用边缘的底部图像。

编辑：创建 jsfiddle 进行测试。如果您使用 Edge 作为浏览器，则可以看到该问题。

http://jsfiddle.net/jjhii/46bv10db/1/

我有一个 SVG，其中包含许多引用外部图像源的图像标签（比如来自 amazon s3 存储桶）。我正在尝试将其转换为 png 像这样

我收到此错误Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': 受污染的画布可能无法导出。

我已经更改了我的 s3 存储桶设置（如此处所述）。在canvg函数之后添加了这段代码

甚至尝试遍历所有图像标签并设置 crossOrigin 属性

我仍然遇到同样的错误。

在我的例子中，我使用 Highcharts 来渲染图表。这个库提供了 SVG 中的图表。我想从这个 SVG 保存一个图像/png，保存在服务器端，所以我可以在那里使用它。首先，我使用 canvg 解析器 ( https://github.com/gabelerner/canvg ) 来获取 SVG 元素的内容。

就我而言，我在页面上有不止一个图表。特此的要求是获取所有这些，保存服务器端并在单个 PDF 文档中使用它们。

代码（js）：

在处理程序（php）中，我这样做：

生成的图像只是一个全黑的东西。

如果我使用以下内容进行 alpha 校正，则图像是完全白色的。

我似乎无法弄清楚哪个步骤不正确。

提前致谢...

我正在尝试将svg转换为png，我发现转换后的图像与svg不同。如何确保 svg 和 png 之间的一致性？

将svg转换为png的代码

一切都是文件，但是当我看到下载的图像时，高度、宽度不同，标签和字体不可见。

生成svg的代码：

实际 SVG：

转换后的 PNG：

这是示例jsFiddle。

如果我将比例从 5000 更改为 6000，则 svg 会更大，但 png 不会。可以右键单击小提琴输出 svg 以导出为 png。

我正在处理需要将谷歌图表导出为 JPEG/PNG 图像的要求。以下代码在除 Internet Explorer 之外的其他浏览器中运行良好。

在 IE 10 中运行上述代码时，它显示空白 PNG 图像，我发现此行有任何问题

canvas.toDataURL("图片/png");

请对此进行调查并提供解决方案

我正在使用canvg将一些 SVG 渲染到图像中。目前 SVG 到画布部分工作得很好。但是我无法确定为什么当指针进入时生成的画布会发生变化。我真的必须复制生成的画布，还是我遗漏了什么？

jsfiddle

在 MacOS X El Capitan 下的 Firefox DE 47 和 Chrome 49 上进行了验证（我的朋友也验证了这在 Firefox 和 Chrome 的 Windows 下发生）。

http://jsfiddle.net/jjhii/46bv10db/1/

另一种观点，更容易看出问题。 http://jsfiddle.net/46bv10db/5/

在上面的示例中，您可以看到右侧标签位于 PNG 文件中图表后面的位置。原始图表在右侧有这些标签。基本上在概念上有两个问题。首先是打印输出（PNG 文件）中的购物车太宽。二是标签落后。我更愿意修复图表六，但我至少可以忍受将标签放在前面。

任何建议，谢谢。

我正在尝试将 SVG 绑定到画布。SVG 有一个笔触宽度设置，它似乎比绑定到画布时所需的要厚。什么可能导致这种情况以及如何解决这个问题？

我用来将 svg 绑定到 html5 画布的库是canvg

下面的 JS 小提琴在画布上显示了 SVG 和绑定的 svg。

JS 小提琴：http: //jsfiddle.net/fYAAf/111/

我使用 canvg 插件创建了一个画布。

然后我想使用 ctx.drawimage() [由 canvg 创建] 在画布下方放置另一个背景图像。

我试过了 。

请建议。