html - PhantomJS 渲染不正确的 PNG 渲染
问题描述
我将网页渲染为尺寸为 7642 像素 x 3815 像素的 PNG。
神奇的是,渲染时,输出的图像有更多的像素(PhantomJS 正在添加一些边距,不知道为什么。)
我试过指定方法 page.paperSize 但它没有做任何事情:
"use strict";
var page = require('webpage').create();
var system = require('system');
var orderId = system.args[1];
var output = "/Users/mac/Desktop" + orderId + ".png"
var url = 'http://localhost:3000/?id=' + orderId
page.viewportSize = { width: 3000, height: 3000 };
page.paperSize = {
width: '7642px',
height: '3815px',
margin: '0px'
};
page.open(url, function (status) {
if (status !== 'success') {
console.log('Ha habido un error');
phantom.exit(1);
} else {
window.setTimeout(function () {
page.render(output, { format: 'png', quality: '100' });
phantom.exit();
}, 5000);
}
});
请问有什么想法吗?
谢谢!
解决方案
最后我找到了这个解决方法并且有效:
page.zoomFactor = 1;
page.open(url, function (status) {
page.evaluate(function(w, h) {
document.body.style.width = w + "px";
document.body.style.height = h + "px";
}, width, height);
page.clipRect = {top: 0, left: 0, width: width, height: height};
if (status !== 'success') {
console.log('Ha habido un error');
phantom.exit(1);
} else {
window.setTimeout(function () {
page.render(output, { format: 'png', quality: '100' });
phantom.exit();
}, 5000);
}
});