実現したいこと
PixiJSで描かれたcanvasをスクリーンショットのようにcanvas全体を画像として取得できるようにしたい(chrome拡張として実装)
###現在考えている手法
PixiJSで既に描かれているcanvas(orig_canvas
)のImageDataを取得し、同じ位置に新たなcanvas(clone_canvas
)を生成してそこにorig_canvas
のデータを描画させ、それをtoDataURL
でpngとして取得したい
(新たなcanvasを表示させなくても取得できるならさせないほうが良い・・・?)
###制約
・PixiJSはこちらでは書き換えできない
・PixiJSで描かれたものをそのままtoDataURLにすると真っ黒な画像が取得されてしまう
・元のcanvas(orig_canvas
)は1つのみ,id,calss名未設定
・複製先のcanvas(clone_canvas
)は新たに生成しなければならない
該当のソースコード
javascript
1function clone() { 2 //origのElement 3 var orig_canvas = document.getElementsByTagName("canvas"); 4 var orig_conetxt = orig_canvas[0].getContext("2d"); 5 6 //cloneのcanvas生成 7 var create_clone = document.createElement("canvas"); 8 create_clone.id = "clone_canvas"; 9 create_clone.width = canvas[0].width; 10 create_clone.height = canvas[0].height; 11 12 //cloneのElement 13 var clone_canvas = document.getElementById("clone_canvas"); 14 var context_clone = create_clone.getContext("2d"); 15 16 //origから取得 -> cloneへ貼り付け 17 var toClone = orig_context.getImageData(0, 0, canvas.width, canvas.height); 18 clone_canvas.getContext("2d").putImageData(toClone, 0, 0); 19 20 //toDataURLによる画像化 21 var img = clone_canvas.toDataURL(); 22};
###発生した問題
・4行目 :contextがnull
データとして帰ってくる
・16行目:上記の4行目が原因でImageData
もnull
になる
尚、2行目のgetElementsByTagName
においてHTMLcollectionを拾っており、そのなかの0:
に指定したいcanvasが登録されていることが確認できています。
試したこと
PixiJSがcontext("2d")ではない!?と思って調べましたがそういうわけでもなく・・・
他の手法でどうにか取れないか模索中です
補足情報(FW/ツールのバージョンなど)
chorme : 66.0.3359.139
上記のスクリプトはcontextscriptとして特定のcanvasで動作しているゲームのサイトのみで読み込まれています
###参考にしたページ
・https://stackoverflow.com/questions/3318565/any-way-to-clone-html5-canvas-element-with-its-content/3320155#3320155
・https://stackoverflow.com/questions/13041783/possible-to-deep-clone-html5-canvas-element-with-jquery
・https://blanktar.jp/blog/2015/04/html-canvas-copy.html
Javascriptを勉強し始めたばかりのものなのでコードも滅茶苦茶であると思います。お許しください。
これ以外に何か手法をご存じの方がいらっしゃいましたらご教授いただけると幸いです。
よろしくお願いいます。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。