[解決済み】JavaScriptでdivのスクリーンショットを撮るには？

質問

HTML Quiz"と呼ばれるものを作っています。これは完全にJavaScriptで動いていて、かなりクールです。

最後に結果ボックスがポップアップして、"Your Results:"と表示され、どれくらい時間がかかったか、何パーセントだったか、10問中何問正解したかが表示されるようになっています。私は、"Capture results"というボタンがあり、何らかの方法でdivのスクリーンショットか何かを取り、右クリックして"Save image as"できるページで取り込んだ画像を表示させたいと考えています。

その結果を他の人と共有できるようにしたいのです。簡単に変更できるので、結果をコピーしてほしくないのです。画像に書かれていることを変更するのであれば、それはそれでいいのです。

どなたか、このような方法をご存知の方はいらっしゃいませんか？

解決方法は？

いいえ、私は要素を「スクリーンショット」する方法を知りませんが、できることは、クイズの結果をcanvas要素に描画し、その上で HTMLCanvasElement オブジェクトの toDataURL 関数を使用して data: 画像の内容を含むURI。

クイズが終了したら、こうしてください。

var c = document.getElementById('the_canvas_element_id');
var t = c.getContext('2d');
/* then use the canvas 2D drawing functions to add text, etc. for the result */

ユーザーが "Capture"をクリックしたら、次のようにします。

window.open('', document.getElementById('the_canvas_element_id').toDataURL());

これは、「スクリーンショット」の新しいタブまたはウィンドウを開き、ユーザーがそれを保存できるようにするものです。ある種の「名前を付けて保存」ダイアログを呼び出す方法はないので、私の意見ではこれが最善の方法です。