फ़ैंटॉमजेएस धुंधला करता है चार्ट.जेएस कैनवास

Question

मैं फैंटॉमजेएस 2.1.1 के माध्यम से एक रिपोर्ट प्रस्तुत करने की कोशिश कर रहा हूं जहां HTML पृष्ठ में चार्ट.जेएस द्वारा उत्पन्न चार्ट शामिल है। मेरे पास उस पृष्ठ पर पूरा नियंत्रण है। परिणामी पीडीएफ एक प्रिंट करने योग्य ए 4 होना चाहिए। जैसा कि आप नीचे स्क्रीनशॉट में देख सकते हैं, चार्ट बहुत धुंधला है।

क्या कोई तरीका है कि मैं चार्ट.जेएस या फैंटॉमजेएस को उच्च डीपीआई पर चार्ट/पेज प्रस्तुत कर सकता हूं ताकि खींचा कैनवास अच्छा और तेज दिखाई दे?

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

संबंध में कागज के लिए कारक ज़ूम एक उच्च डीपीआई का उपयोग कर की स्थापना डीपीआई स्क्रीन करने के लिए प्रयास करें:

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

पेज आकार के बाद

सेट किया जाना चाहिए।

आप भी इस जवाब की जाँच कर सकते हैं:
Poor quality of png images drawn into html canvas

Answer 3

प्रेत 2 के लिए, मैं संकल्प उठना एक बड़े कैनवस के साथ चार्ट प्रदान की गई है और फिर इसे एक png में परिवर्तित कर दिया अंत में नष्ट करने और हटाने के पुराने कैनवास और उन्हें उत्तरदायी सीएसएस कक्षाओं के साथ एक छवि के साथ बदल दिया। Chart.js विकल्पों के अलावा कैनवास चौड़ाई और ऊंचाई पर knobes समायोजित करने से आप एक आदर्श प्रस्तुत करेंगे। हम दृष्टिकोण के साथ हमारी प्रतिपादन गति प्राप्त करने में सक्षम थे (एसवीजी रेंडर के विकल्प) और फ़ाइल का आकार नीचे।

HTML:

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

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

जावास्क्रिप्ट:

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