Javascript phantomjs屏幕截图未缩放到页面内容

我有一对来自客户端的横幅（例如，宽度为160像素，高度为600像素），但当我尝试拍摄屏幕截图时，我看到的结果是白色背景的图像400x600（当结果文件为JPEG时为黑色），横幅位于左侧（约160x600）。我不能硬编码视口大小，因为所有的横幅都不同。 是否可以动态设置viewPortSize或类似于横幅的结果图片

const page = require('webpage').create();
const system = require('system');
/**
 *  FIRST ARG - name of this runner
 *  SECOND ARG - input html file
 *  THIRD ARG - destination
 */
if (system.args.length !== 3) {
    console.log('Usage: phantomRunner.js [inputFile] [destination]');
    phantom.exit();
}
const inputFile = system.args [1];
const outputPath = system.args [2];

page.open(inputFile, function (status) {
    if (status !== 'success') {
        phantom.exit(1);
    } else {
        page.render(outputPath);
        phantom.exit();
    }
});

我已经尝试将viewPortSize减小到10x10，但没有任何帮助

编辑 我发现将浏览器宽度更改为小于360的大小是不可能的，这是一个问题

有和横幅完全一样的结果图片吗

const page = require('webpage').create();
const system = require('system');
/**
 *  FIRST ARG - name of this runner
 *  SECOND ARG - input html file
 *  THIRD ARG - destination
 */
if (system.args.length !== 3) {
    console.log('Usage: phantomRunner.js [inputFile] [destination]');
    phantom.exit();
}
const inputFile = system.args [1];
const outputPath = system.args [2];

page.open(inputFile, function (status) {
    if (status !== 'success') {
        phantom.exit(1);
    } else {
        page.render(outputPath);
        phantom.exit();
    }
});

换句话说，您只想对给定元素进行截图。这里没有一个完整的脚本，只是重要的部分

var banner_id = system.args [1];

var b = page.evaluate(function (banner_id) {
    return document.getElementById(banner_id).getBoundingClientRect();
}, banner_id);

page.clipRect = {
    top:    b.top,
    left:   b.left,
    width:  b.width,
    height: b.height
};

page.render(system.args [2]);

---

我想在截图时这些横幅还没有呈现出来。您需要在

页面之前设置一些延迟。render

@MysterX nope。。。它加载了，我看到了广告，增加了1秒的延迟，但结果是相同的，这是一个好主意，但我将在主体和第一个子元素之间注入一些带有banner_id的div元素，并执行相同的操作，因为我不知道banner中会出现什么。非常感谢，这很有帮助！