Pixijsで生成したcanvasを画像にしたいが、 todataURL()した中身が透明の画像になってしまう

前提・実現したいこと

Pixijsで生成したcanvasをpngにしたいが、
todataURL()中身が透明の画像になってしまいます。

おそらくはcanvasが生成されていないままtodataUrlしてるのではないかと考えているのですが、
どうしたらいいかわかりません・・・

該当のソースコード

javascript
1  const handleChange = async (e) => {
2    await setAnswer(e.target.value)
3    canvasToImage()
4  }
5
6  const canvasToImage = () => {
7    let canvas = document.getElementById("canvas");
8    var png = canvas.toDataURL();
9    document.getElementById("image").src = png;
10    console.log("changed")
11  }

html
1<StageWithNoSSR
2  id="canvas"
3  width={300}
4  height={300}
5  options={{ backgroundColor: 0xFFCC00 }}
6>
7  <TextWithNoSSR
8    text={answer}
9    x={150}
10    y={140}
11    anchor={0.5}
12    style={{
13      align: 'center',
14      fontSize: 24,
15      fontWeight: 700,
16      fill: '#000000',
17      wordWrap: true,
18      wordWrapWidth: 260,
19      breakWords: true
20    }}
21  />
22  <TextWithNoSSR
23    text={odai.odai}
24    x={50}
25    y={250}
26    style={{
27      align: 'center',
28      fontSize: 12,
29      fontWeight: 400,
30      fill: '#000000',
31      wordWrap: true,
32      wordWrapWidth: 200,
33      breakWords: true
34    }}
35  />
36</StageWithNoSSR>
37<div><img id="image"/></div>

使用ツール

dependencies
1
2  "dependencies": {
3    "@fortawesome/fontawesome-svg-core": "^1.2.35",
4    "@fortawesome/free-brands-svg-icons": "^5.15.3",
5    "@fortawesome/free-solid-svg-icons": "^5.15.3",
6    "@fortawesome/react-fontawesome": "^0.1.14",
7    "@inlet/react-pixi": "^6.6.3",
8    "microcms-js-sdk": "^1.2.0",
9    "next": "11.0.1",
10    "pixi.js": "^6.1.0",
11    "react": "17.0.2",
12    "react-dom": "17.0.2"
13  },

行動規範の内容に同意します

回答1件

ベストアンサー

pixiの初期化をどのようにして行っているかわからないのですが

js
1const app = new PIXI.Application({preserveDrawingBuffer: true});

のようにpreserveDrawingBuffer: trueオプションを有効にすると良いようです。
参考: PixiJSのRendererから画像を取得する（toDataURL）|Qiita

投稿2021/08/05 03:10

webgoto

総合スコア1293

yushi.kida

2021/08/05 10:56

画像生成できました！本当に助かりました。ありがとうございます！！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Pixijsで生成したcanvasを画像にしたいが、 todataURL()した中身が透明の画像になってしまう

前提・実現したいこと

該当のソースコード

使用ツール

関連した質問