方法
canvas.toDataURL()を使います。
ただし、toDataURLをPixiのレンダラビューに対して使うには、レンダラを作成する際【preserveDrawingBuffer: true】とオプション指定する必要があります。
例
Tutorialsに従って、以下のように画像を描画します（learningPixiより拝借）。
var stage = new PIXI.Container(),
renderer = PIXI.autoDetectRenderer(256, 256);
document.body.appendChild(renderer.view);
//Use Pixi's built-in `loader` object to load an image
PIXI.loader
.add("images/cat.png")
.load(setup);
//This `setup` function will run when the image has loaded
function setup() {
//Create the `cat` sprite from the texture
var cat = new PIXI.Sprite(
PIXI.loader.resources["images/cat.png"].texture
);
//Add the cat to the stage
stage.addChild(cat);
//Render the stage
renderer.render(stage);
}
するとHTMLのbodyにcanvas要素が追加され、そこに画像が描画される。
この時、canvas要素に当たるのがrenderer.viewです。
つまり描画した画像をImageとして取得したければ、
renderer.view.toDataURL("image/png");
とすれば良い。
しかし、このままでは動きません。
レンダラを作成する時に、toDataURLを使えるようオプション指定する必要があります。
上記のコード２行目の宣言を以下のように書き換えます。
renderer = PIXI.autoDetectRenderer(256, 256, {preserveDrawingBuffer: true});
これでtoDataURLが使用できるようになり、Imageデータを取得できます。
まとめ
順を追ったコードを記します。
まずは基本的なセットアップを行い、画像を描画する。
この時、レンダラ作成時のオプションpreserveDrawingBufferを忘れずに。
var stage = new PIXI.Container(),
renderer = PIXI.autoDetectRenderer(256, 256, {preserveDrawingBuffer: true});
document.body.appendChild(renderer.view);
//Use Pixi's built-in `loader` object to load an image
PIXI.loader
.add("images/cat.png")
.load(setup);
//This `setup` function will run when the image has loaded
function setup() {
//Create the `cat` sprite from the texture
var cat = new PIXI.Sprite(
PIXI.loader.resources["images/cat.png"].texture
);
//Add the cat to the stage
stage.addChild(cat);
//Render the stage
renderer.render(stage);
}
そしてレンダラビュー（canvas）から画像を取得したい時。
var imgUrl = renderer.view.toDataURL("image/png");
更に、この画像を<img id="canvas_image">に表示したい場合。
var img = document.getElementById("canvas_image");
img.src = imgUrl;
// jQueryならもっと簡単
$("#canvas_image").attr("src", imgUrl);
これでpixiのレンダラビュー（canvas要素）から取得した画像を、imgタグに表示して扱うことが出来ます。
また、aタグのhref属性にimgUrlを渡せば、画像のダウンロードも可能になります。
最後に
Pixi.jsを用いて様々な要素を描画し、全てまとめて画像化――使い道はたくさんありそうです（ゲームのセーブサムネイルとか）。
元々はhtml2canvasでcanvas以外の要素もまとめてキャプチャをしようと考えていたのですが、どうにもpixiで描画したcanvasの内容はキャプチャされないようで、致し方なくこのような手段に移行しました。上記を踏まえてhtml2canvasを改造するというのが理想的なのですが、ちょっと私の技術では及ばず……。
html2canvasでもpixiのcanvasデータをキャプチャできるよーと、何か方法をご存知の方いらっしゃいましたら、コメントにて教えてくださると幸いです。
追記
Twitterにて荻原さん（@tempura17654）より、html2canvasでもPIXIのcanavasをキャプチャ出来るようにする方法をご提案頂きました。
html2canvasの『cloneCanvasContents()関数』
function cloneCanvasContents(canvas, clonedCanvas) {
try {
if (clonedCanvas) {
clonedCanvas.width = canvas.width;
clonedCanvas.height = canvas.height;
// ================ ↓編集ここから↓ ================
// 元の記述はコメントアウト
// clonedCanvas.getContext("2d").putImageData(canvas.getContext("2d").getImageData(0, 0, canvas.width, canvas.height), 0, 0);
// 新たに以下を追加
var img = new Image();
img.src = canvas.toDataURL();
clonedCanvas.getContext("2d").drawImage(img, 0, 0, canvas.width, canvas.height);
// ================ ↑編集ここまで↑ ================
}
} catch(e) {
log("Unable to copy canvas content from", canvas, e);
}
}
PixiJSでもhtml2canvasを使って簡単に画面のキャプチャが取得できるようになりました！
荻原さん、ありがとうございます！！