[英]PhantomJS screen capture D3.js datamaps
I would like to take screenshots of D3 maps such as this one. 我想拍摄D3地图的屏幕截图,例如这张 。 I am able to take screenshots of the websites with PhantomJS and rasterize.js .
我可以使用PhantomJS和rasterize.js截取网站的屏幕截图。
phantomjs rasterize.js https://martingonzalez.net/datamaps-d3-example/ map_rasterize_1000x500.png 1000px*600px
Unfortunately, the arcs are cut off as you can see below. 不幸的是,弧线被切断,如下所示。
Is there a way get the full arcs as well? 有没有办法获得完整的弧度? I would also be able to take images of local HTML files with the D3 maps if that would be more straightforward.
如果这样更简单,我也可以使用D3映射来获取本地HTML文件的图像。
PS I used the example rasterize.js which can be found below. PS我使用了示例rasterize.js,可以在下面找到它。
"use strict";
var page = require('webpage').create(),
system = require('system'),
address, output, size, pageWidth, pageHeight;
if (system.args.length < 3 || system.args.length > 5) {
console.log('Usage: rasterize.js URL filename [paperwidth*paperheight|paperformat] [zoom]');
console.log(' paper (pdf output) examples: "5in*7.5in", "10cm*20cm", "A4", "Letter"');
console.log(' image (png/jpg output) examples: "1920px" entire page, window width 1920px');
console.log(' "800px*600px" window, clipped to 800x600');
phantom.exit(1);
} else {
address = system.args[1];
output = system.args[2];
page.viewportSize = { width: 600, height: 600 };
if (system.args.length > 3 && system.args[2].substr(-4) === ".pdf") {
size = system.args[3].split('*');
page.paperSize = size.length === 2 ? { width: size[0], height: size[1], margin: '0px' }
: { format: system.args[3], orientation: 'portrait', margin: '1cm' };
} else if (system.args.length > 3 && system.args[3].substr(-2) === "px") {
size = system.args[3].split('*');
if (size.length === 2) {
var pageWidth = parseInt(size[0], 10),
pageHeight = parseInt(size[1], 10);
page.viewportSize = { width: pageWidth, height: pageHeight };
page.clipRect = { top: 0, left: 0, width: pageWidth, height: pageHeight };
} else {
console.log("size:", system.args[3]);
var pageWidth = parseInt(system.args[3], 10),
pageHeight = parseInt(pageWidth * 3/4, 10); // it's as good an assumption as any
console.log ("pageHeight:",pageHeight);
page.viewportSize = { width: pageWidth, height: pageHeight };
}
}
if (system.args.length > 4) {
page.zoomFactor = system.args[4];
}
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);
}
});
}
Try to change this logic: 尝试更改此逻辑:
window.setTimeout(function () {
page.render(output);
phantom.exit();
}, 200);
To this: 对此:
window.setTimeout(function () {
page.render(output);
phantom.exit();
}, 5000);
It is possible that 5000 milliseconds it is to much, but it is for testing. 可能要花5000毫秒,但这是用于测试。 It is better to know when animation is finished than capture screenshot.
最好知道动画何时结束而不是捕获屏幕截图。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.