Question

我有一些来自客户端的横幅（例如 - 宽度160像素和高度600像素）但是当我尝试拍摄屏幕截图时，我看到的结果为400x600图像，白色背景（或结果文件为JPEG时为黑色）左侧的横幅（约160x600）。我无法硬编码 viewPortSize ，因为所有横幅都不同。是否可以动态设置 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，但它没有帮助。

EDIT 我发现无法将浏览器宽度更改为低于360的大小，这是一个问题。

Answer 1

结果图片与横幅完全相同吗？

换句话说，您只想制作给定元素的屏幕截图。这不是一个完整的脚本，只是重要的部分。

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]);

phantomjs截图不缩放到页面内容

1 个答案: