使用带有RequireJs的PhantomJs:未加载模块

时间:2016-04-21 13:28:11

标签: javascript requirejs phantomjs

我在当前项目中成功使用RequireJs作为javascript模块加载器。现在我想在一段时间内拍摄一些结果网站的照片,这样我就可以使用ffmpeg创建某种视频。为此,我尝试使用PhantomJs。幻像脚本如下所示:

var system = require('system');
var args = system.args;

if (args.length == 1) {
  console.log('Use: phantom '+ args[0] +' URL');
  phantom.exit();
} else if (args.length == 2) {
  var url = args[1];
  console.log('Opening ' + url);
} else {
  console.log('Too many arguments. Use: phantom ' + args[0] + ' URL');
  phantom.exit();
}


// Parameters
var startDelay = 10; // in seconds
var fps = 30;
var duration = 10; // in seconds
var viewportSize = {width: 1024, height:768};

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

page.onResourceReceived = function(response) {
  console.log('Response (#' + response.id + ', url "' + response.url + '")');
};

page.open(url, function (status) {
  setTimeout(function() {
    var frame = 0;
    setInterval(function() {
      page.render('frames/frame'+(frame++)+'.png', {format: 'png'});
      if(frame > duration*fps) {
        phantom.exit();
      }
    }, 1000/fps);
  }, startDelay*1000);
});

虽然网站在浏览器中正确显示,但在使用PhantomJs时,我只是得到空帧。我已检查PhantomJs正在加载哪些资源,并且根本没有加载RequireJs个依赖项(已在幻像和服务器端都检查过)。这就是我的index.htmlmain.js文件的样子:

的index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="wrapper">
    <svg id="map"></svg>
    <canvas id="wind" width="1920" height="1400"></canvas>
    <canvas id="torque" width="1920" height="1400"></canvas>
    <div id="timeline"></div>
  </div>
  <script data-main="src/main" type="text/javascript" src="bower_components/requirejs/require.js"></script>
</body>
</html>

main.js

require.config({
  paths: {
    torque: 'torque',
    timeSeries: 'time_series',
    wind: 'wind',
    map: 'map',
  }
});

require(['wind', 'torque', 'timeSeries', 'map'], function(wind, torque, timeSeries, map) {
  'use strict';
  // Some stuff...
});

由于某种原因,main.js文件已加载但未评估,因此没有任何反应。造成这种情况的原因可能是什么?

0 个答案:

没有答案