PixiJSのRendererから画像を取得する（toDataURL）～追記：html2canvasを使う方法

#方法
**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を使って簡単に画面のキャプチャが取得できるようになりました！
荻原さん、ありがとうございます！！