EaselJS内のDisplayObjectを画像ファイルとして取得する

EaselJSのcreatejs.DisplayObjectの要素を画像ファイルとして保存するには、cache()メソッドを使用すると便利です。

cache()メソッドを呼び出すとEaselJS内部ではCanvasを生成し、DisplayObjectに描画されているグラフィックスをCanvas上に再度描画し、グラフィックスをCanvasで置き換えて、次回の描画以降はそのCanvasを表示するようになります。その時に生成されるCanvasはcacheCanvasプロパティとして取得できます。

cacheCanvasはCanvasのため、toDataURL()メソッドを呼び出すことができるので、そこで取得した文字列を、例えばwindow.open()したり、IMGタグのsrcとして指定することで画像として扱う事ができるようになります。

var container = new createjs.Container();

〜ほにゃらら〜

// 位置(0,0)からサイズ(200px,200px)分だけCanvasに描画する
container.cache(0,0,200,200);

// 「data:image/png,〜」
var dataUrl = container.cacheCanvas.toDataURL('image/png', null);

window.open(dataUrl);

その後、注意しなければいけないこととして、DisplayObjectの描画を再更新させるには、uncache()メソッドを呼び出してDisplayObject内にあるCanvasの参照を破棄させることが必要になります。

全体のソースコード