问题标签 [canvg]

我正在使用 Raphael 绘制一个对象，然后使用 canvg 将其传输到 HTML 画布元素，以便我可以使用 toDataURL 将其保存为 PNG。但是当我使用canvg时，生成的图像是模糊的。例如，下面的代码会产生这个（顶部是 raphael，底部是 canvg）：

在 toDataURL 创建的 png 中，模糊也很明显。知道这里发生了什么吗？我认为这与重新调整大小无关。我试过设置 ignoreDimensions: True 和其他一些东西。

另一个数据点。如果我用raphael输出一些文字再用canvg，不仅模糊而且字体不对！

这是建议的 test.rect(0.5,0.5,50,50) 。仍然模糊：

我正在尝试使用 drawSvg() 函数将 SVG 转换/放入画布中。命令是：ctx.drawSvg(SVG_XML_OR_PATH_TO_SVG, dx, dy, dw, dh);. 当我专门将 svg 作为参数放入时，这很好用，例如：ctx.drawSvg('<svg><rect x="0" y="0" width="100" height="100" fill="red" /></svg>', 0 , 0 , 500, 500);，我最终得到一个带有红色方块的画布，这是完全正确的。但是，我需要能够从文档中获取 Svg 标记并将其用作参数。我尝试了几种不同的方法来做到这一点，但它们都不起作用。我该怎么做？这是一个 jsFiddle 页面，其中包含我正在尝试做的事情。谢谢！ http://jsfiddle.net/qDmhV/722/

尝试通过canvg将d3生成的线散点图转换为画布时遇到问题。

我的图表最初看起来像这样：

图片链接

其中，当通过 svg.html().trim() 打印 svg 时，会打印以下 HTML：

正如你所看到的，我尽可能地尝试做内联样式。但是，当我使用 canvg 将其转换为画布时，它看起来像这样。

画布输出

出于某种原因，只有 x 轴是可见的并设置了样式。我用这段代码生成了第二张图片：

我在控制台中确实有一个错误，上面写着：

经过研究，很多人和我有类似的问题，但没有提供太多帮助。我发现的唯一信息是 canvg 很难翻译一些 SVG 元素并且干脆放弃了。我的最终目标是以某种方式将我的 d3 生成的 SVG 保存到客户端的计算机中。

另外，如果有帮助，我只担心 Chrome。非常感谢您的参与...

我的高级目标是将<div>包含一些内联 svg 图像的元素转换为 png 文件。所有操作都必须使用 JavaScript 在客户端浏览器中执行。我试过了：

1. 使用canvg库并按照这篇文章中的步骤操作：https ://github.com/niklasvh/html2canvas/issues/95#issuecomment-34439223

   原始svg：

   

   结果：

   

2. 将css样式展平到<svg>标签中，然后调用canvg，按照这篇文章的步骤：将嵌入式SVG就地转换为PNG

   结果：空白图像。

3. 将 css 样式展平到<svg>标签中并手动将 svg 绘制到画布上，按照这篇文章中的步骤操作： 如何将带有 css 样式的内联 SVG 从浏览器保存/导出到图像文件

   结果：空白图像。

4. 使用以下代码将 css 样式展平为内联样式表：http: //spin.atomicobject.com/2014/01/21/convert-svg-to-png/

   结果：空白图像。

5. 使用svg crowbar手动将<div>元素下载为 .svg 文件。

   结果：

   

   然后，当我将原始 svg 的计算 css 与下载的 svg 进行比较时，我发现下载的 svg 具有正确的 svg xml，但内联样式表不正确 ( <style type="text/css">) 例如图最右侧的数字 200、300，它们在我的外部 css中绘制<text x="214" dy=".32em" y="0" style="text-anchor: start;">200</text>，我有：

   .scatterChart .axisGraphicsContext 文本 { 字体大小：8px; 填写：#777；}

   但是，下载的 svg 的内联样式表中没有 font-size 和 fill 属性。

我想将我的SVG转换为CANVAS，然后将其保存为图像。我已经在我的页面中由 javascript 生成了 svg。我使用这段代码：

两种方式都行不通。为什么？

我遇到了canvg的问题。我无法让它呈现一个右浮动的元素。

我用来在这个 d3 图的右侧浮动元素（svg 元素实际上不支持 css 浮动）的技巧是创建一个 x=100% 的嵌套 svg，然后在子元素上使用负 x 值来移动他们回到可视区域。

正如你在这个小提琴中看到的，canvg 没有渲染 badContainer 的内容。

http://jsfiddle.net/ujdaLfh7/3/

谢谢。

编辑：

作为该问题的解决方法，我最终使用设置子 svg 的 x 位置的函数以及监视窗口调整大小的 angular.js 指令来定位图例框。

尽管如此，如果有人知道如何让 canvg 绘制位于 svg 区域之外的东西，我会接受你的回答。

我们的网站出现问题，使用 chrome 从亚马逊 S3 加载图像，其中crossOrigin属性设置为"Anonymous"。

我们的 S3 服务器设置为：

`

`

我正在使用 canvg.js 从具有远程图像的 SVG（在亚马逊 S3 服务器上）创建画布，但 chrome 浏览器返回“请求的资源上不存在‘Access-Control-Allow-Origin’标头。” 执行此代码后出现错误：

在 Firefox 和 IE 中，这不会导致任何问题。

我们正在尝试将 svg 图像下载为 png 并使用 canvg 将其转换为画布对象。但是下载后我们看不到图像并且看到奇怪的黑色图像并且无法正确显示。你能修一下小提琴吗？

我正在使用 canvg 将 svg 元素渲染到画布上并使用 jspdf 下载它。下面是我的代码：

但是pdf上的图像看起来很模糊，不像原始图像那么清晰（忽略背景差异）：

我认为这可能是由 canvg 将 svg 渲染到画布上的步骤引起的。但我不知道如何解决它，有人可以帮忙吗？

这是我的谷歌图表，它从 PHP 中获取数据并使用 addRows 中的 for 循环填充图表。我添加了一个按钮 (pdfBtn)，让我可以导出使用 jsPDF 创建的文档。一切都适用于所有浏览器，但使用 Firefox，我得到一个黑色图像而不是导出文档中的图表。我试图将格式更改为 PNG，但我得到的是白色图像而不是黑色。我知道它与 JPEG 和 PNG 的背景颜色属性有关，但我尝试设置 CSS，但没有任何效果。我真的不知道如何解决这个问题。但是，pdfBtn 在 Internet Explorer 上不起作用，但我很乐意首先在 Firefox 上解决这个问题。