HTML5 में फाइल करने के लिए कैनवास डेटा को कैसे सेव करें?

कैनवास HTML पृष्ठ पर केवल एक आयताकार क्षेत्र है। हम जावास्क्रिप्ट की मदद से इस आयताकार क्षेत्र (कैनवास) में ग्राफिक्स बना सकते हैं।

कैनवास को HTML5 में −

<canvas id = ”canvas1” width = ”250” height = ”150”></canvas>                                 

यह एक खाली कैनवास बनाता है जिसका नाम कैनवास1 चौड़ाई=200 और ऊंचाई=100 के साथ है।

इसमें ग्राफिक्स बनाने के लिए हम जावास्क्रिप्ट का उपयोग करते हैं -

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             

इस ग्राफ़िक को सहेजने के लिए, हमें इसे कुछ डेटा url जैसे img.png या img.jpg

इसके लिए हम लिखेंगे -

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 में फाइल करने के लिए सहेज सकते हैं।