PhantomJS将HTML转换为JPEG：图像被截断

Question

我正在尝试使用phantomjs将HTML页面转换为JPEG ，并且底部的输出图像被截断（图片不显示完整的HTML页）。

PhantomJS

这是 rasterize.js

的代码

var page = require('webpage').create(),
    system = require('system'),
    address, output, size;

    address = system.args[1];
    output = system.args[2];

    page.open(address, function (status) {
        if (status !== 'success') {
            console.log('Unable to load the address!');
            phantom.exit(1);
        } else {
            window.setTimeout(function () {
                page.render(output);
                phantom.exit();
            }, 200);
        }
    });

和我运行如下：

phantomjs ./rasterize.js ./test.html ./test.jpg

HTML

我要导出的HTML页面使用jointjs，它将SVG绘制到页面，因此它包含<svg>标记以及<g>标记，然后添加一些正常{ {1}}，<div>等标记。

以下是HTML页面中的一些示例：

<table>

在浏览器中查看输入HTML页面时，整个页面都在视图中/ HTML页面中没有任何内容被删除。

图像

生成的图片会显示HTML页面中的... <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="v-2" width="3100" height="1101" visibility="shown"> <defs id="v-4"> <linearGradient id="linearGradientv-2-107112646"> <stop offset="0%" stop-color="rgb(228,234,243)" stop-opacity="1"/> <stop offset="60%" stop-color="rgb(201,212,231)" stop-opacity="1"/> </linearGradient> ... <g id="j_1" model-id="86b320b6-0e8a-4dee-8258-e329b97c04ea" class="element custom Device" magnet="false" fill="#FFFFFF" stroke="none" transform="translate(50,100)"> <g class="rotatable" id="v-6" transform="rotate(0,150,20)"> <g class="scalable" id="v-47" transform="scale(2,0.16)"> <rect class="body" id="v-13" fill="url(#linearGradientv-2-107112646)" width="150" height="250" stroke="black"/> </g> ... </svg> ，但它会被切断！整个表格应该显示出来。应该进入＆＃34; e＆＃34;而是切断其中一个＆＃34; d＆＃34;行。在实际的HTML页面中（在浏览器中查看），表格显示正确，并且上升到＆＃34; e＆＃34;：

有谁知道为什么我的图像会被切断？

Answer 1

嗯，原来这是一个联合问题而不是PhantomJS问题！对于那些可能会发现这个问题的人，我仍然会发布解决方案。

当用户移动或创建元素时，可以在画布上创建它。所以我听“鼠标指针向上”事件并检查它是否离开画布。如果它关闭，那么我展开画布。 JointJS代码现在看起来像这样：

paper.on('cell:pointerup', function(cellView, evt, x, y) {
     if(x>(paper.options.width-150))
     {
         paper.setDimensions((paper.options.width+200),paper.options.height);
     }else if(y>paper.options.height)
     {
         paper.setDimensions(paper.options.width,(paper.options.height+200));
     }
});