畫布圖像變得模糊

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，並且我使用默認的圖像標籤來顯示圖像。 –

畫布圖像變得模糊

回答

相關問題