PhantomJS bulanıklaştırır Chart.js kanvas

Question

Bir HTML sayfası Chart.js tarafından oluşturulan bir grafik içeren PhantomJS 2.1.1 aracılığıyla bir rapor oluşturmaya çalışıyorum. Bu sayfa üzerinde tam kontrole sahibim. Elde edilen PDF yazdırılabilir bir A4 olmalıdır. Aşağıda ekran görüntüsünde gördüğünüz gibi, grafik çok bulanık.

Chart.js veya PhantomJS grafiğini/sayfasını daha yüksek bir DPI'da oluşturmanın herhangi bir yolu var mı? Böylece, çizilmiş tuvalin hoş ve keskin görünmesi mümkün mü?

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

sizin phantomjs sayfasında viewportSize ve zoomFactor ekleyin:

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

ve html kafası şablonunda eklemek

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

Answer 2

DPI ekrana ilgili olarak kağıt için daha yüksek bir DPI kullanarak yakınlaştırma faktörünü belirlemeyi deneyin:

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

Sayfa boyutu tanımlandıktan sonra ayarlanmalıdır. Sonunda tahrip ve kaldırma Phantom 2 için
Poor quality of png images drawn into html canvas

Answer 3

, ayağa çözünürlük elde etmek için büyük bir zemine sahip grafikler haline getirilir, sonra bir png dönüştürdüm:

Ayrıca bu cevabı kontrol edebilir eski tuval ve onları duyarlı CSS sınıfları ile bir görüntü ile değiştirin. Chart.js seçeneklerine ek olarak tuval genişliği ve yüksekliği üzerindeki düğmelerin ayarlanması size mükemmel bir görünüm kazandırır. Görüntü işleme hızımızı yaklaşımla (SVG render'lerine alternatif) ve dosya boyutunda indirdik.

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