PhantomJS отображает размытый холст Chart.js

Question

Я пытаюсь отобразить отчет через PhantomJS 2.1.1, где страница HTML содержит диаграмму, сгенерированную Chart.js. Я полностью контролирую эту страницу. Полученный 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

Добавить viewportSize и zoomFactor на странице phantomjs:

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 

Должен быть установлен после определения размера страницы.

Вы также можете проверить этот ответ:
Poor quality of png images drawn into html canvas

Answer 3

для Phantom 2, я оказаны диаграммы с большим холстом, чтобы получить разрешение и затем превращаю его в 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(); 
    } 
}