Introduction

In this article, we will learn how to get an Image data URL within a canvas and how to load the image data URL of the canvas. We can get the Image Data URL of the canvas and convert it into a 64-bit encoded PNG URL. To load the canvas with an image data URL, we can use AJAX to get a data URL.
The dataURL is saved in a text file and we will get the data URL from that text file and create an image object with the URL.
Step 1:
image 1.jpg
Step 2:
image 3.jpg
Step3: In this step, we will use JavaScript with HTML to get the Image Data URL of The Canvas.
Example: In this example, we will get the Image Data URL of the canvas and show it in a message box using an alert.
Write down to code into first .htm page.
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <title></title>
  4. </head>
  5. <script>
  6. window.onload = function () {
  7. var canvas = document.getElementById("getcanvas");
  8. var context = canvas.getContext("2d");
  9. // draw cloud
  10. context.beginPath(); // begin custom shape
  11. context.moveTo(100, 80);
  12. context.bezierCurveTo(130, 100, 130, 150, 230, 150);
  13. context.bezierCurveTo(130, 100, 130, 150, 230, 150);
  14. context.bezierCurveTo(250, 180, 320, 180, 340, 150);
  15. context.bezierCurveTo(420, 150, 420, 120, 390, 100);
  16. context.bezierCurveTo(430, 40, 370, 30, 340, 50);
  17. context.bezierCurveTo(320, 5, 250, 20, 250, 50);
  18. context.bezierCurveTo(200, 5, 150, 20, 170, 80);
  19. context.closePath(); // complete custom shape
  20. context.lineWidth = 5;
  21. context.fillStyle = "#84D6F0";
  22. context.fill();
  23. context.strokeStyle = "#ff00ff";
  24. context.stroke();
  25. // save canvas image as data url (png format by default)
  26. var dataURL = canvas.toDataURL();
  27. alert(dataURL);
  28. };
  29. </script>
  30. <body>
  31. <canvas id="getcanvas" width="1000" height="550">
  32. </canvas>
  33. </body>
  34. </html>
Output:
Clipboard02.jpg
Step 4: Copy the Data URL of the canvas from the message box, then Add a Text file in your Solution Explorer and paste it in the text file.
Clipboard05.jpg
Step 5: In this step, we will draw an image within the canvas using The Image Data URL. Write down the code into second the .htm page.
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <title></title>
  4. </head>
  5. <script>
  6. function loadCanvas(dataURL){
  7. var canvas = document.getElementById("loadcanvas");
  8. var context = canvas.getContext("2d");
  9. // load image from data url
  10. var imageObj = new Image();
  11. imageObj.onload = function(){
  12. context.drawImage(this, 0, 0);
  13. };
  14. imageObj.src = dataURL;
  15. }
  16. window.onload = function(){
  17. // make ajax call to get image data url
  18. var request = new XMLHttpRequest();
  19. request.open("GET", "dataURL.txt", true);
  20. request.onreadystatechange = function(){
  21. if (request.readyState == 4) { // Makes sure the document is ready to parse.
  22. if (request.status == 200) { // Makes sure it's found the file.
  23. loadCanvas(request.responseText);
  24. }
  25. }
  26. };
  27. request.send(null);
  28. };
  29. </script>
  30. <body>
  31. <canvas id="loadcanvas" width="1000" height="1000">
  32. </canvas>
  33. </body>
  34. </html>
Output:
Clipboard02.jpg