画布图像变得模糊

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

我想要做的是显示与highcharts显示相同的输出时，它导出为PDF格式或SVG格式，事实上，在这段代码中我已经使用了相同的功能，用于生成Highcharts的SVG文件输出这似乎是适合我的

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

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

var svgres = chart.getSVG(); 
 
var svgArr = [], 
 
\t \t \t top = 0, 
 
\t \t \t height = 0, 
 
\t \t \t width = 0, 
 
\t \t \t col=0; 
 
\t \t \t svgCustDim = 400; 
 
\t \t \t var svgWidth = 600, 
 
\t \t \t svg = svgres.replace('<svg', '<g transform="translate(' + col * svgWidth + ',' + top + ')" '); 
 
\t \t \t svg = svg.replace('</svg>', '</g>'); 
 
\t \t \t 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");

来源

2017-03-29 Abhishek Solanki

在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/

来源

2017-03-30 07:14:20

感谢@LiviuBoboia这是有帮助的..还有一两件事我想要问的是，您是否知道在PDF文件中显示图像的任何方法，并且它不会变得模糊，因为仍然通过使用这个新的canvg文件，在SVG分辨率下像素或PNG图像变得模糊，并且像素都保持不变。 ..

这将是真正有帮助的，如果有任何解决方案...

谢谢。 –

你如何添加生成图像？因为如果我把图像的画布结果看起来很好https://jsfiddle.net/9yktct3z/7/ –

首先，我生成SVG，然后将该数据传递到Canvg来创建画布，并通过toDataURL方法获取图像URL我使用pdfmake.min.js来生成PDF，并且我使用默认的图像标签来显示图像。 –

画布图像变得模糊

回答

相关问题