使用 PhantomJS 渲染图表并拍摄快照

【问题标题】：Rendering a graph with PhantomJS and taking a snapshot使用 PhantomJS 渲染图表并拍摄快照
【发布时间】：2015-12-12 16:14:12
【问题描述】：

我想生成一个图表以添加到电子邮件中。我正在考虑使用 PhantomJS 来做到这一点。我正在使用 2.0 版的 PhantomJS。我想加载 d3.js（在 cloudfare 上）和 c3.js（在本地 js 文件中）。我在这里遗漏了一些东西。当我使用 PhantomJS 运行脚本时，它会在窗口对象上返回 d3 作为 undefined。

我下面的代码不起作用：

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();
};

【问题讨论】：

标签： javascript phantomjs

【解决方案1】：

你的代码有很多问题：

page.includeJs(url, callback) 是一个异步函数，因此您需要将需要它包含的 JavaScript 的代码放入回调中（您根本没有）。
本地文件（c3.js）需要使用page.injectJs(filename)。
您不能从页面上下文返回window，因为它不是可以序列化的原始对象。来自docs：

注意：evaluate 函数的参数和返回值必须是简单的原始对象。经验法则：如果可以通过 JSON 序列化就可以了。

闭包、函数、DOM 节点等将起作用！

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

【讨论】：