Question

我正在尝试使用phantomjs创建一个图形到png的转换器，但很难让它工作。几乎我看到的每一个例子都使用了一些外部URL，好像你用它做的一切都是刮擦，而且文档非常缺乏。

为了测试一些东西，我创建了一个非常简单的d3函数，在其中添加了<svg>标记和一个蓝色圆圈。看看有关SO和示例的其他问题，我将它挂钩到onLoadFinish，但该事件永远不会触发。

我猜我需要open页面，但是open只使用了一个与我无关的网址（同样，文档完全缺乏信息。即使是我看到我认为可能相关的内容，only choice is guesswork。这是ridiculous）

这是我的代码：

var page = require('webpage').create(); 

var content = '<html>';
content += '<body>';
content += '<h1> test title </h1>';
content += '<div id="graph">';
content += '</div>';
content += '</body></html>';    

page.content = content; 

page.injectJs('lib/d3/d3.min.js');
page.onLoadFinish = function(status) {
    console.log('loading finished'); // this never happens!
    var svg = d3.select('#graph')
                .append('svg')
                .attr({'width': 100, 'height': 100});   

    var circle = svg
        .append('circle')
        .attr({ 'cx': 10, 'cy': 10, 'r': 10, 'fill': 'blue' });   

    page.render('test.png');
    phantom.exit();
};

有什么建议吗？

Answer 1

它是evaluate。那是我正在寻找的功能。它＆＃34;在网页的上下文中评估给定的功能＆＃34;。

最后，它的工作：

page.content = content; 
page.injectJs('lib/d3/d3.min.js');
page.evaluate(function() {
    var svg = d3.select('#graph')
                .append('svg')
                .attr({'width': 100, 'height': 100});   

    var circle = svg
        .append('circle')
        .attr({ 'cx': 10, 'cy': 10, 'r': 10, 'fill': 'blue' });   

    page.render('test.png');
    phantom.exit();
};

phantomjs - 加载页面后运行渲染，但加载永远不会触发

1 个答案: