HTML5 でキャンバス データをファイルに保存するにはどうすればよいですか?

キャンバスは、HTML ページ上の単なる長方形の領域です。 JavaScript を使用して、この長方形の領域 (キャンバス) にグラフィックを描画できます。

キャンバスは HTML5 で -

<canvas id = &rdquo;canvas1&rdquo; width = &rdquo;250&rdquo; height = &rdquo;150&rdquo;></canvas>                                 

として作成できます。これにより、canvas1、幅 = 200、高さ = 100 という名前の空のキャンバスが作成されます。

グラフを描画するには JavaScript を使用します -

var canvas = document.getElementById("Canvas1");
 var ctx1 = canvas.getContext("2d");
ctx1.moveTo(0,0); ctx1.lineTo(300,200);
 ctx1.stroke(); // This method actually draw graphics as per context object             

このグラフを保存するには、img.png や img.jpg

# などのデータ URL として保存する必要があります ##これを行うには、 -

var imgurl= canvas.toDataURL( ) ; / / This method saves graphics in png
document.getElementById(‘cimg’).src = imgurl; // This will set img src to dataurl(png)
so that it can be saved as image.

と記述します。これにより、キャンバス データを HTML5 ファイルに保存できます。

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