WebGLでレンダリングされたCanvasをtoDataURLしてimgurAPIでアップするけど真っ黒な画像になる

Question

どんなことでも何でも構いませんので、お知恵頂ければ幸いです。宜しくお願い致します。

前提

Phaser.jsというゲームエンジンを使ったゲームをJavascriptで書きました。

現状の処理

• リザルト画面にて、Canvas内の１つの要素をクリックすることで、以下の一連の処理が実施される
• WebGLで描画されているcanvasを、toDataURL()で画像に変換する
• その画像データをBlob形式に変換する
• Blob形式のデータを、XMLHttpRequestで、imgurのAPIを使用してアップロードする
• レスポンス内のURLを取得する

発生している問題

• レスポンスのURLにアクセスすると、真っ黒なだけの画像が表示される

imgurAPIからのレスポンス内容

{"id":"dwdGkep","title":null,"description":null,"datetime":1672621440,"type":"image\/png","animated":false,"width":800,"height":800,"size":12914,"views":0,"bandwidth":0,"vote":null,"favorite":false,"nsfw":null,"section":null,"account_url":null,"account_id":0,"is_ad":false,"in_most_viral":false,"has_sound":false,"tags":[],"ad_type":0,"ad_url":"","edited":"0","in_gallery":false,"deletehash":"445HisfrUgBgogT","name":"","link":"https:\/\/i.imgur.com\/dwdGkep.png"},"success":true,"status":200}

"success":true,"status":200となっているので、アップロード処理自体は問題なさそう。

該当のソースコード

画像送信処理

function dataURLtoBlob(dataURL) {
  const bin = atob(dataURL.split(',')[1]);
  const buffer = new Uint8Array(bin.length);
  for (let i = 0; i < bin.length; i++) {
    buffer[i] = bin.charCodeAt(i);
  }
  return new Blob([buffer], { type: 'image/png' });
}

function canvasToImage() {
  // canvas要素から画像データを取得
  //const canvas = document.getElementsByTagName("canvas")[0];
  var gl = game.canvas.getContext("webgl", { preserveDrawingBuffer: true });
  const imageData = game.canvas.toDataURL("image/png");

  // 画像データをBlob形式に変換
  const blob = dataURLtoBlob(imageData);

  const xhr = new XMLHttpRequest();

  xhr.open("POST", "https://api.imgur.com/3/image");
  xhr.setRequestHeader('Authorization', 'Client-ID XXXXXXXXXXXX');

  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log(xhr.response);
    } else {
      console.error(xhr.response.data);
    }
  };

  xhr.send(blob);
}

上記の処理の呼び出し部分(抜粋)
create関数内でイベントを設定している感じ

      tweetButton.on("pointerdown", () => {
        // ボタンがクリックされたときの処理をここに記述する
        canvasToImage();
      });

以下はコードcreate関数全体

    var tweetButton;

    // ゲームのオブジェクトを作成する
    function create() {
      // tweetButtonを表示する
      tweetButton = this.add.image(400, 500, "tweetButton");
      tweetButton.setDepth(10);
      tweetButton.setVisible(false);
      tweetButton.setInteractive();
      tweetButton.on("pointerdown", () => {
        // ボタンがクリックされたときの処理をここに記述する
        canvasToImage();
      });
      var startScreenImage = this.add.image(400, 400, "startScreen");
      startScreenImage.setInteractive();
      // タイマーを表示するテキストを作成する
      this.gameTitle = this.add.text(200, 155, "終わりなき追跡", {
        fontSize: "70px",
        fill: "#000000" // テキストの色を黒にする
      });
      this.startMessage = this.add.text(200, 250, "クリックでゲーム開始", {
        fontSize: "40px",
        fill: "#000000" // テキストの色を黒にする
      });
      this.Notion = this.add.text(200, 600, "※パソコンでのプレイ専用ゲームです", {
        fontSize: "30px",
        fill: "#DC143C" // テキストの色を黒にする
      });
      startScreenImage.on("pointerdown", () => {
        // クリックされたときに、startScreenImageを削除する
        this.gameTitle.destroy();
        this.startMessage.destroy();
        this.Notion.destroy();
        startScreenImage.destroy();
        startScreenImage_flg = true;
        // ゲームを開始する処理をここに書く
        // カーソルを作成する
        this.cursor = this.add.circle(400, 400, 17, 0x0000ff);
        // 赤い円を作成する
        this.redCircles = [];
        var redCircle = this.add.circle(
          Phaser.Math.Between(
            this.cursor.x - clearance, // カーソルから300px左にある座標
            this.cursor.x + clearance // カーソルから300px右にある座標
          ),
          Phaser.Math.Between(
            this.cursor.y - clearance, // カーソルから300px上にある座標
            this.cursor.y + clearance // カーソルから300px下にある座標
          ),
          50, // 半径
          0xff0000 // 色
        );
        this.redCircles.push(redCircle);
        // 5秒ごとに赤い円を追加する処理を開始する
        this.intervalId = setInterval(() => {
          // 赤い円を作成する
          var redCircle = this.add.circle(
            Phaser.Math.Between(this.cursor.x - clearance, this.cursor.x + clearance),
            Phaser.Math.Between(this.cursor.y - clearance, this.cursor.y + clearance),
            50, // 半径
            0xff0000 // 色
          );
          redCircle.speed = Math.random() * 0.09 + 0.01;
          this.redCircles.push(redCircle);
        }, 5000);

        // タイマーを表示するテキストを作成する
        this.timerText = this.add.text(10, 10, "0秒", {
          fontSize: "32px",
          fill: "#000000" // テキストの色を黒にする
        });
        // タイマーを初期化する
        this.elapsedTime = 0;
        this.prevTime = this.time.now;
        this.gameOverText = this.add.text(200, 300, "", {
          fontSize: "32px",
          fill: "#000000" // テキストの色を黒にする
        });
        this.gameOverText.setDepth(10);
      });
      // タブが非アクティブになったときに、ゲームを終了する処理を登録する
      document.addEventListener("visibilitychange", () => {
        this.gameOver = true;
        startScreenImage_flg = true;
        clearInterval(this.intervalId);
      });
    }

試したこと

調べてみて、同じ事象に対して以下が有効とあったので、やってみたが効果なし。toDataURLの直前に書いた。

var gl = game.canvas.getContext("webgl", { preserveDrawingBuffer: true });

Answer 1

StackOverflow に同様の質問がありました。こちらが参考にならないでしょうか。
レンダリングループの中でキャプチャをすると上手くいくようです。

■ Canvas toDataURL() returns blank image
https://stackoverflow.com/questions/26783586/canvas-todataurl-returns-blank-image

var captureFrame = false;

function render() {
  drawScene(); 

  if (captureFrame) {
    captureFrame = false;
    var data = someCanvas.toDataURL();
    ...
  }

  requestAnimationFrame(render);
}
render();

someElement.addEventListener('click', function() {
  captureFrame = true;
}, false);

Comments

[hysy]

ありがとうございます。
教えて頂いた処理function render() {を、どこに加えればよいのかを考えあぐねています。
もし、何かご見識ありましたら、教えて頂けますと幸いです。宜しくお願い致します。

[cx20]

> function render() {を、どこに加えれば

Phaser.js 使ったことは無いですが、ググった感じだと
レンダリングループに相当するのは update() 関数ではないかと思います。

■ [Phaser3]updateの中で指定時間ごとに処理を行うには
https://gentuki-blog.site/articles/vHHaXZbaQ0uBShyNUXKiI
■ Phaser 3 でゲーム作成入門
https://qiita.com/41semicolon/items/0d2f2509d4ac1558badb