12

フロントエンドのすべてのページから 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何らかの方法で権利にアクセスできるかもしれません。何か案は?

4

1 に答える 1