キャンバス画像がぼやけて表示されます

Question

https://jsfiddle.net/Abhi_Solanki/9yktct3z/3/ここではフィドルリンクです。

私がしようとしているのは、ハイカットがPDF形式またはSVG形式でエクスポートされたときと同じ出力を表示することです。 HighchartsのSVGファイルを生成するために使用されているのと同じ機能が私には当てはまります

しかし、その変数をcanvg.jsファイルに渡すと問題が起こり、その時に画像の出力がぼやけてしまいます。

どこで出力が同じであるかは、ハイチャート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");

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ように見えることを、あなたのチャートhttps://jsfiddle.net/9yktct3z/6/

ノートと同じ次元であるように、上記のURLから取らcanvg.jsや変更とフィドルですあなたは、コンテナに

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

とSEをグラフから大きな解像度の画像は、高さと幅を削除したい場合は.min.js）

ですトン彼らのチャートオプションで、私は* 2000 2000を使用していますが、ここでの値

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

で遊ぶことはいっぱいフィドルあるhttps://jsfiddle.net/9yktct3z/10/