我使用 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 ?
提前致谢。
最佳答案
处理 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);
关于javascript - pdf 的 phantomjs 屏幕截图 - Canvas 缩放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36085884/