HTML キャンバスをキャプチャして、画像 (PNG、JPG、GIF) または PDF として保存するにはどうすればよいですか?

HTML キャンバスを画像または PDF としてキャプチャする

質問:

キャプチャできますかHTML キャンバスに表示されたコンテンツを画像 (GIF、JPG、PNG) または PDF としてエクスポートしますか?具体的には、キャンバス グラフィックから PNG 画像を生成するにはどうすればよいですか?

答え:

はい、HTML キャンバスのコンテンツをキャプチャしてエクスポートすることができます。画像または PDF として。キャンバスから PNG 画像を生成するには:

const canvas = document.getElementById('mycanvas');
const img = canvas.toDataURL('image/png');

これにより、PNG データを含む文字列が作成されます。このデータを使用して、新しい画像要素を作成したり、ファイルに書き出すことができます。

新しい画像要素の作成

新しい画像要素を作成するには、 PNG 画像を表示するには、次のコードを使用します:

document.getElementById('existing-image-id').src = img;

これにより、画像要素の src 属性が ID で設定されます。 「existing-image-id」を PNG データに追加し、キャンバスのコンテンツを画像として効果的に表示します。

ファイルへの書き込み

PNG データをファイルに書き込むにはファイルを作成するには、次のコードを使用します。

document.write('<img src="' + img + '" />');

これにより、画像データが HTML ドキュメントに直接書き込まれます。その後、ドキュメントを目的の拡張子 (.png など) を付けたファイルとして保存し、キャンバスのコンテンツを画像として保存できます。

以上がHTML キャンバスをキャプチャして、画像 (PNG、JPG、GIF) または PDF として保存するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。