フロントエンドのすべてのページから png 画像を生成するスクリプトを書いています。UI に angular を使用し、ファントムでページをキャプチャしています。
ビューは、Angular がレンダリングを終了するまでしばらく時間がかかるため、キャプチャする前に少し待つ必要があります。
var page = require('webpage').create();
page.open('http://localhost:9000/', function () {
window.setTimeout(function () {
page.render('snapshot.png');
phantom.exit();
}, 2000);
});
これを達成するためのより良い方法があるかどうか疑問に思います。ページが完全にレンダリングされると、角度がイベントを発行できることがわかりました。
$scope.$on('$viewContentLoaded', function () {
// do something
});
そして、ファントムと通信する方法を見つけたonCallback
ので、次のように書くことができました:
$scope.$on('$viewContentLoaded', function () {
window.callPhantom({ hello: 'world' });
});
次に、ファントムスクリプトの別の場所で:
page.onCallback = function() {
page.render('snapshot.png');
phantom.exit();
};
$viewContentLoaded
しかし、ファントム スクリプトから角度ハンドルを挿入する方法がわかりません。
evaluate
/evalueateAsyn
が進むべき道かどうかはわかりません...
page.evaluateAsync(function () {
$scope.$on('$viewContentLoaded', function () {
window.callPhantom({ hello: 'world' });
});
});
$scope
何らかの方法で権利にアクセスできるかもしれません。何か案は?