PhantomJS呈現模糊Chart.js畫布

我想通過PhantomJS 2.1.1呈現報表，其中HTML頁面包含由Chart.js生成的圖表。我完全可以控制該頁面。生成的PDF應該是可打印的A4。正如你在下面的截圖中看到的那樣，圖表非常模糊。PhantomJS呈現模糊Chart.js畫布

是否有任何方法可以讓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 
});

來源

2016-04-06 dislick

畫布元素的高度和寬度是多少？ –

@RahulR。我已經使用CSS將其設置爲100％。我認爲Chart.js是因爲'快速響應：真正'' – dislick

是否找到了解決此問題的解決方案？ –

添加viewportSize和zoomFactor在phantomjs頁：

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

，並添加你的HTML頭模板

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

來源

2016-12-13 15:34:29 DevTrong

嘗試在關係設定使用更高的DPI縮放係數爲紙屏幕DPI：

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

必須在定義頁面大小後設置。

你也可以看看這個答案：
Poor quality of png images drawn into html canvas

來源

2016-04-06 07:42:34 K3N

對於幻影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(); 
    } 
}

來源

2016-09-16 16:58:12 leifdejong

PhantomJS呈現模糊Chart.js畫布

回答

相關問題