PhantomJS làm mờ biểu đồ Chart.js mờ

Question

Tôi đang cố gắng hiển thị báo cáo qua PhantomJS 2.1.1 nơi trang HTML chứa biểu đồ được tạo bởi Chart.js. Tôi có toàn quyền kiểm soát trang đó. PDF kết quả phải là A4 có thể in được. Như bạn thấy trong ảnh chụp màn hình xuống dưới, biểu đồ rất mờ.

Có cách nào tôi có thể làm cho Chart.js hoặc PhantomJS hiển thị biểu đồ/trang ở DPI cao hơn để khung vẽ được hiển thị đẹp và sắc nét không?

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

Thêm viewportSize và zoomFactor trong trang phantomjs của bạn:

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

và thêm vào mẫu đầu html của bạn

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

Answer 2

Hãy thử thiết lập hệ số thu phóng sử dụng một DPI cao hơn cho giấy liên quan đến màn hình DPI:

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

Phải được đặt sau khi kích thước trang được xác định.

Bạn cũng có thể kiểm tra câu trả lời này:
Poor quality of png images drawn into html canvas

Answer 3

Đối với Phantom 2, tôi trả lại các bảng xếp hạng với một tấm vải lớn để có được độ phân giải lên và sau đó chuyển đổi nó thành một png cuối cùng phá hủy và loại bỏ canvas cũ và thay thế chúng bằng một hình ảnh với các lớp CSS đáp ứng. Việc điều chỉnh các nút bấm trên chiều rộng và chiều cao của canvas cùng với các tùy chọn Chart.js sẽ giúp bạn có được kết xuất hoàn hảo. Chúng tôi đã có thể làm cho tốc độ hiển thị của chúng tôi tăng lên theo cách tiếp cận (thay thế cho hiển thị SVG) và kích thước tệp xuống.

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