Question

我使用phantomjs从我网站上的内容制作pdf。以canvas作为例外，它看起来很棒。

在我的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);

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

1 个答案: