PhantomJS私はHTMLページはChart.jsによって生成されたチャートを含むPhantomJS 2.1.1を経由してレポートを表示しようとしているぼやけChart.jsキャンバス

Question

をレンダリングします。私はそのページを完全に支配している。結果のPDFは印刷可能なA4でなければなりません。下のスクリーンショットにあるように、チャートは非常にぼやけています。

は私が描かれたキャンバスは素晴らしく、シャープ表示されるようにChart.jsまたはPhantomJSのいずれかがより高いDPIでチャート/ページをレンダリングすることができます方法はありますか？

PhantomJS：

page.property('paperSize', { 
    format: 'A4', 
    orientation: 'portrait', 
    border: '2cm' 
}); 

Chart.js：

var lineChart = new Chart(ctx).Line(data, { 
    animation: false, 
    responsive: true, 
    pointDot: false, 
    scaleShowLabels: true, 
    showScale: true, 
    showTooltips: false, 
    bezierCurve : false, 
    scaleShowVerticalLines: false 
}); 

Answer 1

があなたのphantomjsページにviewportSizeとzoomFactorを追加します。

await page.property('viewportSize', { height: 1600, width: 3600 }); 
await page.property('zoomFactor', 4); 

とあなたのhtml頭テンプレートに追加

<script> 
    window.devicePixelRatio = 4; 
</script> 

Answer 2

DPIをスクリーニングするために関連して、紙のためのより高いDPIを使用してズーム倍率を設定してみてください：

page.zoomFactor = 300/96; // or use/72 

ページサイズが定義された後に設定する必要があります。

ます。また、この答えをチェックアウトすることができます：ファントム2の場合
Poor quality of png images drawn into html canvas

Answer 3

を、私は解像度を得るために、大きなキャンバスにグラフを描画して、最終的に破壊し、削除PNGにそれを変換します古いキャンバスを使用してイメージをレスポンシブなCSSクラスに置き換えることができます。キャンバスの幅と高さのノブをChart.jsオプションに加えて調整すると、完璧なレンダリングが得られます。私たちは、アプローチ（SVGレンダリングの代わり）とファイルサイズの縮小でレンダリング速度を上げることができました。

HTML：

<div class="container"> 
    <!-- generated images --> 
    <img id="someIdImage" class="img-responsive"></img> 

    <!-- temporary canvas --> 
    <canvas id="someId" width="2000" height="600"></canvas>  
</div> 

Javascriptを：

/** 
* _plot() plot with Chart.js 
* 
* @param {Function} callback 
*/ 
function _plot(callback) { 
    var config = {}; // some Chart.js config 
    var id = 'someId'; 
    var el = document.querySelector('#' + id); 
    var el2d = el.getContext('2d'); 

    // plot instance 
    var instance = new Chart(el2d, config); 

    // generate and append image 
    document.querySelector('#' + id + 'Image').setAttribute('src', el.toDataURL('image/png')); 

    // destroy instance 
    instance.destroy(); 
    el.parentElement.removeChild(el); 

    // callback 
    if (callback) { 
    callback(); 
    } 
}