前提・実現したいこと
webGLのgetPixel
でcanvas全体の色情報を取得したものをcanvas2dに用いられるImageData
に変換し,
webGLで表示されている部分のcanvasをキャプチャしたい.
###考えた手法
webGLのgl.readPixels
がRGBA, Uint8Arrayで出力でき、それがcanvasのgetImageData
におけるImageData.data
と同じであることがわかった。 (下記参考にしたサイトを参照)
そこでwebGLからgl.readPixels
を用いてUnit8Arrayの配列でcavas全体の色情報を取得する。
その後、その配列情報をImageData.data
として変数に格納し、別に用意したcanvasにputImageで表示させようとした。
そしてputImageされたCanvasをtoDataURL()でpng化させようとした。
###制約事項
・元のcanvas
はid, class なし / WebGL(PixiJS)で描画されている
・取得した画像を表示するclone_canvas
はcanvas2dで描画する
該当のソースコード
javascript
1//元のcanvasの色情報取得 2var orig_canvas = document.getElementsByTagName("canvas")[0]; 3var gl = canvas.getContext("webgl"); 4 5var Uint8Array = new Uint8Array( canvas.width * canvas.height * 4); 6gl.readPixels(0, 0, canvas.width, canvas.height, gl.RGBA, gl.UNSIGNED_BYTE, Uint8Array); 7 8//cloneのcanvas生成 9var create_clone = document.createElement("canvas"); 10create_clone.id = "clone_canvas"; 11create_clone.width = orig_canvas.width; 12create_clone.height = orig_canvas.height; 13 14//cloneのElement 15var clone_canvas = document.getElementById("clone_canvas"); 16var context_clone = clone_canvas.getContext("2d"); 17 18//ImageDataの作成とputImage 19var img_data = { 20 data : Uint8Array, 21 height: orig_canvas.height, 22 width: orig_canvas.width 23}; 24 25context_clone.putImageData(img_data, 0, 0); 26 27//toDataURLによる画像化 28var canvas_img = clone_canvas.toDataURL();
発生している問題・エラーメッセージ
TypeError: Failed to execute 'putImageData' on 'CanvasRenderingContext2D': parameter 1 is not of type 'ImageData'.
Uint8Arrayで生成された配列データがcanvas2dのものと型がちがっていると推測しました。
試したこと
canvas2dのRefernceには Uint8ClampedArray とあったのでそれに書き換えましたが結果は変わりませんでした・・・
###参考にしたサイト
・https://developer.mozilla.org/ja/docs/Web/API/WebGLRenderingContext/readPixels
・https://developer.mozilla.org/en-US/docs/Web/API/ImageData
・https://wgld.org/d/webgl/w086.html
補足情報(FW/ツールのバージョンなど)
chorme : 66.0.3359.139
上記のスクリプトはcontextscriptとして特定のcanvasで動作しているゲームのサイトのみで読み込まれています
くだらないミス、根本的な認識の間違えの可能性もあります。その場合は大変申し訳ありません。
何か気が付いた事がありましたら教えていただけると幸いです。
よろしくお願いします。
回答4件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。