HTML5 Canvas को canvas.toDataURL() से इमेज के रूप में कैसे सेव करें?

कैनवास का इमेज डेटा URL प्राप्त करने के लिए toDataURL() मेथड का उपयोग करें। यह ड्राइंग (कैनवास) को बेस64 एन्कोडेड PNG URL में बदल देता है।

उदाहरण

कैनवास को इमेज के रूप में सेव करने का कोड:

<!DOCTYPE HTML>
<html>
  <head>
  </head>
  <body>
    <canvas id="newCanvas" width="450" height="300"></canvas>
    <script>
      var canvas = document.getElementById('newCanvas');
      var ctx = canvas.getContext('2d');
      // draw any shape
      ctx.beginPath();
      ctx.moveTo(120, 50);
      ctx.bezierCurveTo(130,100, 130, 250, 330, 150);
      ctx.bezierCurveTo(350,180, 320, 180, 240, 150);
      ctx.bezierCurveTo(320,150, 420, 120, 390, 100);
      ctx.bezierCurveTo(130,40, 370, 30, 240, 50);
      ctx.bezierCurveTo(220,7, 350, 20, 150, 50);
      ctx.bezierCurveTo(250,5, 150, 20, 170, 80);
      ctx.closePath();
      ctx.lineWidth = 3;
      ctx.fillStyle = '#F1F1F1';
      ctx.fill();
      ctx.stroke();
      var dataURL = canvas.toDataURL();
    </script>
  </body>
</html>

toDataURL() डिफ़ॉल्ट रूप से image/png लौटाता है। toDataURL('image/jpeg', 0.9) से JPEG गुणवत्ता 0.9 के साथ। डेटा URL को <img src="dataURL"> में उपयोग कर सकते हैं, सर्वर भेज सकते हैं, या download एट्रिब्यूट वाले लिंक से डाउनलोड कर सकते हैं।