Bagaimana untuk menyimpan data kanvas ke fail dalam HTML5?

Kanvas hanyalah kawasan segi empat tepat pada halaman HTML. Kita boleh melukis grafik dalam kawasan segi empat tepat ini (Kanvas) dengan bantuan JavaScript.

Kanvas boleh dibuat dalam HTML5 sebagai -

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

Ini akan mencipta kanvas kosong bernama canvas1, lebar=200, tinggi=100.

Untuk melukis graf di dalamnya kami menggunakan 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             

Untuk menyimpan graf ini, kami perlu menyimpannya sebagai beberapa url data seperti img.png atau img.jpg #🎜 🎜#

Untuk ini, kami akan menulis -

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.

Dengan cara ini, kami boleh menyimpan data kanvas ke fail HTML5.

Atas ialah kandungan terperinci Bagaimana untuk menyimpan data kanvas ke fail dalam HTML5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!