javascript - PhantomJS 将 HTML 转换为 JPEG : Image is cut off

Question

我正在尝试使用 phantomjs 将 HTML 页面转换为 JPEG 并且底部的输出图像被 chop (图像不显示完整的 HTML 页面) .

幻影

这是我为 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>标签，然后添加一些正常的 <div> , <table>等标签。

以下是 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>

当在浏览器中查看时，输入的 HTML 页面会显示整个页面/HTML 页面中没有任何内容被 chop 。

图片

生成的图像显示 <table>来自 HTML 页面，但它被切断了!整个表应该显示。它应该上升到“e”，而不是切断“d”行之一。在实际的 HTML 页面中(在浏览器中查看)，表格正确显示并上升到“e”:

有谁知道为什么我的图片被 chop 了？

Answer 1

好吧，原来是 jointJS 问题，根本不是 PhantomJS 问题!对于那些可能发现这个问题的人，我仍然会发布解决方案。

当一个元素被用户移动或创建时，它可能是在 Canvas 之外创建的。所以我听了“鼠标指针向上”事件并检查它是否离开了 Canvas 。如果关闭，则我展开 Canvas 。 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));
     }
});