2010/12/09

Webページのスクリーンショット画像を生成

Imageユニットが提供する画像処理機能には、ウィンドウの表示内容を画像として取得するcapture()メソッドなども用意されています。
これをATLユニットで用意されているIEコンポーネントの表示機能と組み合わせれば、以下のようにしてWebページのスクリーンショットを生成することも可能です。
use('Window','ATL');
var w=OnScreenDisplay.create({
    width:800,height:600, x:-32000,alpha:0,
    children:{
        ie:{
            type:Trident,
            top:0,bottom:0,left:0,right:0,
        }
    }
}).show(true);
w.request(function(){
    this.ie.object.observe('DWebBrowserEvents2_DocumentComplete',function(o){
        w.capture().save('webpage.png');
        w.close();
    });
    this.ie.object.navigate("http://lukewarm.s151.xrea.com/nilscript.html");
});
w.wait('destroy');
配下にIEコンポーネントを配置したOnScreenDisplayを生成し表示させた後、ウィンドウのスクリーンショットを保存しウィンドウを閉じるというイベントハンドラを、IEコンポーネントのCOMオブジェクトの読み込み完了イベントに割り当て、キャプチャしたいページのURLにnavigate()しています。

OnScreenDisplayは、Windowクラスを継承して定義されているクラスで、タイトルバーや枠などを持たず、タスクバーにも表示されず、クリックが背後のウィンドウに透過する情報表示向けのウィンドウです。
これをx:-32000という絶対に画面に表示されない位置に表示させることで、一切画面に表示されることなくキャプチャを実行させられます。
通常のウィンドウは、描画先としてデスクトップのデバイスコンテキストを使用しているため、実際に表示されていない部分は真っ黒になってしまいますが、alphaオプションで半透明にしたウィンドウは独自のデバイスコンテキストを持つため、画面外にあってもキャプチャ可能になります。
半透明にしておけば画面外に出す必要は無い気がしますが、表示される瞬間に一瞬だけちらつきが見えてしまうので、x:-32000は有った方がいいでしょう。

0 件のコメント:

コメントを投稿