1

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

http://code.google.com/p/canvg/
function getChartImage(chartId: string): string {
"use strict";

var svg: any = document.querySelector("svg");
var svgData: any = new XMLSerializer().serializeToString(svg);
var canvas: any = document.getElementById("canvas");
var result: any = canvg(canvas, svgData);

return canvas.toDataURL("text/png");
}

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

在此处输入图像描述

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

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

4

2 回答 2

1

问题：

由于Microsoft Edge 中的错误，它创建了许多属性，包括填充大写。而且 canvg 不能正常工作。

解决方案：

  1. 在您的 svgData 中将所有属性名称（除了 viewBox 和 markerWidth 之类的驼峰式名称）从大写更改为小写

  2. 在canvg中有一个池请求。但它不保护 viewBox 和其他几个驼峰属性中的大写 B。因此，您可以自己合并该池请求（如果有，请在代码中为 viewBox 做一个异常）并使用它。

于 2016-02-10T15:00:29.470 回答
0

尝试删除 xmlns 属性：jsfiddle

svg = '<svg id=\"svgId\"
于 2016-08-09T10:51:02.813 回答