php - php、javascript、またはjqueryを使用して、画像とテキストを含むhtml divのスクリーンショットを作成するにはどうすればよいですか?

Question

特定の div コンテンツをキャプチャして、div に画像やテキストなどを含めることはできますか?

スクリプトで可能な方法があれば教えてください。

Answer 1

要素を「スクリーンショット」する方法はわかりませんが、divをキャンバス要素に描画し、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 */

ユーザーが「キャプチャ」をクリックしたら、次のようにします。

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

これにより、「スクリーンショット」を含む新しいタブまたはウィンドウが開き、ユーザーはそれを保存できます。