用于pdf的phantomjs屏幕截图-画布缩放

Question

我使用 phantomjs 将我网站上的内容制作成 pdf。除了画布，它看起来很棒。

在我的 print.css / media css 中，我将画布设置为 100%

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

画布/画布的内容（由 chart.js 生成的图表）看起来被拉伸/失焦。

通过阅读各种帖子，我注意到通过 css 设置大小是行不通的，我必须将它放在标签内或通过 javascript 直接在 canvas 元素上设置。

但是，这并不是一个真正的选择，因为它已经在网站上完美地缩放/大小。如果我没有 100% 的高度宽度，画布不会出现锯齿状，但对于我的 pdf 格式来说它太大了。

解决此问题的正确方法是什么，为我的屏幕截图获取一个清晰的画布，该画布的大小适合 A4/标准 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);