PhantomJS esegue il rendering della tela Chart.js sfocata

Question

Sto tentando di eseguire il rendering tramite PhantomJS 2.1.1 dove la pagina HTML contiene un grafico generato da Chart.js. Ho il pieno controllo su quella pagina. Il PDF risultante dovrebbe essere un A4 stampabile. Come puoi vedere nello screenshot qui sotto, il grafico è molto sfocato.

C'è un modo per rendere Chart.js o PhantomJS rendere il grafico/pagina a un DPI più alto in modo che la tela disegnata sia gradevole e nitida?

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

Aggiungi ViewportSize e zoomFactor nella tua pagina phantomjs:

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

e aggiungere nel vostro template testa html

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

Answer 2

provare a impostare il fattore di zoom utilizzando un più alto DPI per la carta in relazione allo schermo DPI:

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

Deve essere impostato dopo aver definito la dimensione della pagina.

Si potrebbe anche verificare questa risposta:
Poor quality of png images drawn into html canvas

Answer 3

Per Phantom 2, ho reso le classifiche con una grande tela per ottenere la risoluzione e poi convertito in una png finalmente distruggere e rimuovere il vecchia tela e sostituendoli con un'immagine con responsive classi CSS. Regolando le manopole sulla larghezza e l'altezza della tela oltre alle opzioni Chart.js otterrai un rendering perfetto. Siamo stati in grado di ottenere la velocità di rendering con l'approccio (alternativo ai rendering SVG) e la dimensione del file verso il basso.

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(); 
    } 
}