canvas 图片变得模糊

Question

https://jsfiddle.net/Abhi_Solanki/9yktct3z/3/ 这里 fiddle link..

我想做的是显示与高图显示相同的输出它以 PDF 格式或 SVG 格式导出，事实上在这段代码中我使用了用于生成 Highcharts SVG 文件的相同函数输出对我来说似乎合适

但问题当我将该变量传递到 canvg.js 文件调用 canvg 函数时出现，此时图像的输出变得模糊

我希望输出保持不变，因为它没有像素模糊，因为它在 highcharts pdf 中是一样的。因为我必须在 pdf 文件中显示图表图像，所以请帮忙。代码如下

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");

Answer 1

github 上的演示页面中使用的 canvg 版本有问题。如果我从这里 https://github.com/canvg/canvg/blob/master/canvg.js 获取脚本并将其粘贴到 fiddle 它工作正常。

您可以在此处阅读更多相关信息 https://github.com/canvg/canvg/issues/486。

而且你的canvas比图片大很多，你可以取图表的宽度和高度，使canvas与图表的尺寸相同。

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>';

这是一个 fiddle，其中 canvg.js 取自上面的 url 并进行了更改，以便您的 canvas 与图表 [=15] 的尺寸相同=]

请注意，缩小版本 (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'
},

这里是完整的fiddlehttps://jsfiddle.net/9yktct3z/10/

canvas 图片变得模糊

canvas image gets blurry

highcharts

html2canvas

pdfmake