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

#方法
**canvas.toDataURL()**を使います。

ただし、toDataURLをPixiのレンダラビューに対して使うには、レンダラを作成する際【**preserveDrawingBuffer: true**】とオプション指定する必要があります。


#例
Tutorialsに従って、以下のように画像を描画します（[learningPixi](https://github.com/kittykatattack/learningPixi)より拝借）。

```js
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として取得したければ、

```js
renderer.view.toDataURL("image/png");
```
とすれば良い。

しかし、このままでは動きません。
レンダラを作成する時に、toDataURLを使えるようオプション指定する必要があります。
上記のコード２行目の宣言を以下のように書き換えます。

```js
renderer = PIXI.autoDetectRenderer(256, 256, {preserveDrawingBuffer: true});
```

これでtoDataURLが使用できるようになり、Imageデータを取得できます。

#まとめ
順を追ったコードを記します。

まずは基本的なセットアップを行い、画像を描画する。
この時、レンダラ作成時のオプション**preserveDrawingBuffer**を忘れずに。

```js
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）から画像を取得したい時。

```js
var imgUrl = renderer.view.toDataURL("image/png");
```

更に、この画像を```<img id="canvas_image">```に表示したい場合。

```js
var img = document.getElementById("canvas_image");
img.src = imgUrl;
```
```js
// jQueryならもっと簡単
$("#canvas_image").attr("src", imgUrl);
```

これでpixiのレンダラビュー（canvas要素）から取得した画像を、imgタグに表示して扱うことが出来ます。

また、aタグのhref属性にimgUrlを渡せば、画像のダウンロードも可能になります。

#最後に
Pixi.jsを用いて様々な要素を描画し、全てまとめて画像化――使い道はたくさんありそうです（ゲームのセーブサムネイルとか）。

元々は[html2canvas](https://html2canvas.hertzen.com/)でcanvas以外の要素もまとめてキャプチャをしようと考えていたのですが、どうにも**pixiで描画したcanvasの内容はキャプチャされない**ようで、致し方なくこのような手段に移行しました。上記を踏まえてhtml2canvasを改造するというのが理想的なのですが、ちょっと私の技術では及ばず……。

html2canvasでもpixiのcanvasデータをキャプチャできるよーと、何か方法をご存知の方いらっしゃいましたら、コメントにて教えてくださると幸いです。

#追記
Twitterにて荻原さん（[@tempura17654](https://twitter.com/tempura17654)）より、html2canvasでもPIXIのcanavasをキャプチャ出来るようにする方法をご提案頂きました。

html2canvasの『**cloneCanvasContents()関数**』

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