【问题标题】:PhantomJS rendering incorrect PNG renderingPhantomJS 渲染不正确的 PNG 渲染
【发布时间】:2018-11-06 08:52:32
【问题描述】:

我将网页渲染为尺寸为 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);
    }
});

有什么想法吗?

谢谢!

【问题讨论】:

    标签: html phantomjs


    【解决方案1】:

    最后我找到了这个解决方法并且有效:

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

    【讨论】: