Question

https://jsfiddle.net/Abhi_Solanki/9yktct3z/3/这里是小提琴链接。

我想要做的是显示与以PDF格式或SVG格式导出的高图显示相同的输出，实际上是这个代码我使用了相同的功能，用于生成Highcharts的SVG文件，其输出对我来说似乎很合适但是当我将该变量传递给调用canvg的canvg.js文件时问题就出现了当图像的输出变得模糊时，我希望输出保持相同，没有像素变得模糊，因为它在highcharts pdf中是相同的。因为我必须在pdf文件中显示图表的图像所以请帮助。代码如下。

＆＃13;

var svgres = chart.getSVG();
var svgArr = [],
			top = 0,
			height = 0,
			width = 0,
			col=0;
			svgCustDim = 400;
			var svgWidth = 600,
			svg = svgres.replace('<svg', '<g transform="translate(' + col * svgWidth + ',' + top  + ')" ');
			svg = svg.replace('</svg>', '</g>');
			svg = '<svg height="' + svgCustDim + '" width="' + svgCustDim*(3)+ '" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svg + '</svg>';
canvg('canvas', svg);
var canvas = document.getElementById('canvas');    
return canvas.toDataURL("image/jpeg");

＆＃13;

Answer 1

github上的演示页面中使用的canvg版本是错误的。如果我从这里获取脚本https://github.com/canvg/canvg/blob/master/canvg.js并将其粘贴在小提琴中它可以正常工作。

您可以在此处详细了解https://github.com/canvg/canvg/issues/486。

此外，您的画布比图像大很多，您可以采用图表的宽度和高度，以使画布与图表的尺寸相同。

svgCustDim = chart.chartHeight;
var svgWidth = chart.chartWidth,
svg = svgres.replace('<svg', '<g');
svg = svg.replace('</svg>', '</g>');
svg = '<svg height="' + svgCustDim + '" width="' + svgWidth+ '" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svg + '</svg>';

以下是从上面的网址中获取的canvg.js以及更改的小提琴，以便您的画布与图表https://jsfiddle.net/9yktct3z/6/

的尺寸相同

请注意，缩小版本（canvg.min.js）似乎是

如果您想要更高分辨率的图像，请从图表容器中删除高度和宽度

<div id="container" style="margin: 0 auto"></div>

并在图表选项中设置它们，我使用2000 * 2000，但你可以使用值

chart: {
    height: 2000,
    width: 2000,
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie'
},

这里是完整的小提琴https://jsfiddle.net/9yktct3z/10/

画布图像变得模糊

1 个答案: