[英]PhantomJS screen capture D3.js datamaps
我想拍攝D3地圖的屏幕截圖,例如這張 。 我可以使用PhantomJS和rasterize.js截取網站的屏幕截圖。
phantomjs rasterize.js https://martingonzalez.net/datamaps-d3-example/ map_rasterize_1000x500.png 1000px*600px
不幸的是,弧線被切斷,如下所示。
有沒有辦法獲得完整的弧度? 如果這樣更簡單,我也可以使用D3映射來獲取本地HTML文件的圖像。
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);
}
});
}
嘗試更改此邏輯:
window.setTimeout(function () {
page.render(output);
phantom.exit();
}, 200);
對此:
window.setTimeout(function () {
page.render(output);
phantom.exit();
}, 5000);
可能要花5000毫秒,但這是用於測試。 最好知道動畫何時結束而不是捕獲屏幕截圖。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.