захват экрана phantomjs для pdf - масштабирование холста

Question

Я использую phantomjs, чтобы сделать pdf-вывод из содержимого на моем сайте. И это отлично выглядит с холстом как исключение.

в моем print.css/CSS СМИ у меня есть холст на 100%

canvas { 
height : 100%!important; 
width : 100%!important; 
} 

холст/содержание холста (который представляет собой график, порожденный chart.js) выглядит растягиванию/вне фокуса.

От чтения различных сообщений я заметил, что настройка размера через css - это не выход, и вместо этого я должен иметь его в теге или задавать его через javascript непосредственно на элементе canvas.

Однако, на самом деле это не вариант, так как он уже масштабирован/отлично расположен на сайте. Если у меня нет ширины высоты 100%, холст не будет зазубрен, но его ПУТЬ слишком большой для моего формата в формате pdf.

Каков правильный путь для исправления этого вопроса, получение четкого холста для моего захвата экрана, размер которого соответствует формату A4/Standard pdf?

Заранее спасибо.

Answer 1

При использовании холста элемент css 'height' и 'width' определяет размер литерала DOM-элемента <canvas> НЕ размер дисплея внутри. Чтобы установить это, попробуйте что-то вроде этого:

// grab canvas attribute 
var canvas = document.getElementById('canvas'); 

// size the display appropriately 
canvas.width = window.innerWidth; 
canvas.height = window.innerHeight; 

// don't forget to account for the window size changing later on 
window.addEventListener('resize', function(){ 
    canvas.width = window.innerWidth; 
    canvas.height = window.innerHeight; 
}, false);