javascript - pdf 的 phantomjs 屏幕截图 - Canvas 缩放

Question

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

在我的 print.css/media css 中我有 100% 的 Canvas

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

canvas 的 Canvas /内容(由 chart.js 生成的图表)看起来被拉伸(stretch)/失焦。

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

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

解决此问题的正确方法是什么，为我的屏幕截图获取大小适合 A4/标准 pdf 格式的清晰 Canvas ？

提前致谢。

Answer 1

处理 Canvas 时，css“高度”和“宽度”元素决定文字 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);