HTML5 でキャンバスデータをファイルに保存するにはどうすればよいですか?-htmlチュートリアル-php.cn

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

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

キャンバスは HTML5 で -

ログイン後にコピー

として作成できます。これにより、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 サイトの他の関連記事を参照してください。