キャンバスをHTML5で保存するにはどうすればよいですか? HTML5 キャンバス保存メソッド

この記事の内容は、HTML5でキャンバスを保存する方法についてです。 HTML5 のキャンバスの保存方法は参考になると思います。

ついにキャンバスにかっこいいグラフィックが描けたので、保存しておきます。ただし、残念ながら、キャンバス内のこれらのグラフィック自体は実際の画像ではないため、直接保存することはできません。幸いなことに、Canvas API には、キャンバス内のグラフィックを画像に変換できる toDataURL() メソッドが用意されています。

デフォルトでは、toDataURL() メソッドはグラフィックを Base64 エンコード形式の png に変換し、データ URL データを返します。 MIME タイプのパラメータを toDataURL() に渡して、キャンバスを他の形式の画像に変換できます。

データ URL データを取得したら、データを 要素に直接入力するか、ブラウザから直接ダウンロードできます。 toDataURL() メソッドを使用してキャンバス全体を画像として保存する方法を示す例を次に示します。

HTML コードは次のとおりです:

<button onclick=toDataURL("image/png")>显示为png图片</button>
<button onclick=toDataURL("image/jpeg")>显示为jpg图片</button>
<canvas id="canvas" width="200" height="200"></canvas>
<img id="image"/>

JavaScript コードは次のとおりです:

function toDataURL(mime) {
   var canvas = document.getElementById("canvas");
   var image = document.getElementById("image");
   image.src = canvas.toDataURL(mime);
}

上記のコードでは、ユーザーが「png イメージとして表示」ボタンをクリックするか、 「jpg 画像として表示」の場合、toDataURL() メソッドが呼び出され、キャンバス内のコンテンツから画像が生成され、ユーザーがダウンロードできるように img タグに画像が埋め込まれます。

1. toDataURL() メソッドは、キャンバス コンテキスト オブジェクトのメソッドではなく、キャンバス要素自体のメソッドです。

2. toDataURL() メソッドで画像を保存するためのデフォルトの形式は「image/png」ですが、ブラウザは他の形式をあまりサポートしていません。たとえば、Google Chrome ブラウザ バージョン 41.0.2272.118 も「image/jpeg」形式をサポートしていますが、「image/gif」形式はサポートしていません。

2. 最新のブラウザでは、キャンバスを右クリックしてキャンバスを画像として保存することがすでにサポートされていますが、デフォルトの「image/png」形式で保存されます。もちろん、プログラムで toDataURL() メソッドを呼び出し、MIME タイプのパラメーターを渡し、他の形式で保存することもできます。

上記はHTML5でキャンバスを保存する方法です。 HTML5 キャンバスの保存方法の完全な紹介 Html5 ビデオ チュートリアル について詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。

以上がキャンバスをHTML5で保存するにはどうすればよいですか? HTML5 キャンバス保存メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。