javascript - 使用 PhantomJS 渲染图形并拍摄快照

标签 javascript phantomjs

我想生成一个图表以添加到电子邮件中。我正在考虑使用 PhantomJS 来做到这一点。我使用的是 PhantomJS 2.0 版本。我想加载 d3.js (在 cloudfare 上)和 c3.js (位于本地 js 文件中)。我在这里缺少一些东西。当我使用 PhantomJS 运行脚本时,它返回 d3 作为窗口对象上的未定义。

我的下面的代码不起作用:

var page = require('webpage').create();
var fs = require('fs');
page.viewportSize = { width: 400, height : 400 };
page.content = '<html><body><canvas id="surface"></canvas> <button>Hello world</button> </body></html>';
page.includeJs("https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js");
var c3_js = "./c3.min.js";
page.includeJs(c3_js);

page.onLoadFinished = function(status) {
  var c3 = page.evaluate(function() {
          return window;
  });

  console.log(c3.d3);

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

最佳答案

您的代码存在很多问题:

  • page.includeJs(url, callback)是一个异步函数,因此您需要将需要其中包含的 JavaScript 的代码放入回调中(您根本没有回调)。

  • 您需要使用page.injectJs(filename)对于本地文件(c3.js)。

  • 您无法从页面上下文返回window,因为它不是可以序列化的原始对象。来自 docs :

    Note: The arguments and the return value to the evaluate function must be a simple primitive object. The rule of thumb: if it can be serialized via JSON, then it is fine.

    Closures, functions, DOM nodes, etc. will not work!

    要么在页面上下文中(在 page.evaluate() 内部)执行所有操作,要么可以向外部返回一些内容的表示。如果您决定在页面上下文中执行此操作,那么您应该查看各种事件监听器,例如 page.onConsoleMessage 来查看来自页面上下文和 page.onCallback 的控制台消息>.

关于javascript - 使用 PhantomJS 渲染图形并拍摄快照,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32602440/

相关文章:

javascript - Google Visualization Chartwrapper 选择图表元素

python - 如何通过 GhostDriver (selenium) 使用 PhantomJS 运行网页代码

c# - 如何在 PhantomJS + Selenium 中隐藏控制台?

javascript - parse_str 函数不适用于查询字符串

javascript - 如何根据计数值 : javascript 对单词进行排序

javascript - 我的 Jquery 无法识别变量值是怎么回事

npm - 安装 phantomjs/any package 全局特定版本

javascript - casperjs exit()/die() 不返回当前目录

javascript - PhantomJS 5-min Wiki phantom.exit() 奇怪

Javascript/jQuery 未定义