我在当前项目中成功使用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.html
和main.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
文件已加载但未评估,因此没有任何反应。造成这种情况的原因可能是什么?