PhantomJS 将 HTML 转换为 JPEG:图像被截断
PhantomJS converting HTML to JPEG: Image is cut off
我正在尝试使用 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>
标签,然后添加一些正常的 <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 页面 中没有任何内容被截断。
图片
生成的图像显示 HTML 页面中的 <table>
,但它被截断了!整个 table 应该显示。它应该上升到 "e",而不是切断 "d" 行之一。在实际的 HTML 页面(在浏览器中查看)中,table 正确显示并上升到 "e":
有谁知道为什么我的图片被截断了?
好吧,原来这是一个 jointJS 问题,根本不是 PhantomJS 问题! 对于那些可能发现这个的人,我仍然 post解决方案。
当用户移动或创建元素时,它可能会在 canvas 之外创建。所以我监听 "mouse pointer up" 事件并检查它是否关闭 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));
}
});
我正在尝试使用 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>
标签,然后添加一些正常的 <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 页面 中没有任何内容被截断。
图片
生成的图像显示 HTML 页面中的 <table>
,但它被截断了!整个 table 应该显示。它应该上升到 "e",而不是切断 "d" 行之一。在实际的 HTML 页面(在浏览器中查看)中,table 正确显示并上升到 "e":
有谁知道为什么我的图片被截断了?
好吧,原来这是一个 jointJS 问题,根本不是 PhantomJS 问题! 对于那些可能发现这个的人,我仍然 post解决方案。
当用户移动或创建元素时,它可能会在 canvas 之外创建。所以我监听 "mouse pointer up" 事件并检查它是否关闭 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));
}
});