Post
Ask Question

Get and Load Canvas Image DataURL

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:
  • Open the Visual Studio 2010.
  • Go to file menu->> new->> website.
  • Select an empty website.
image 1.jpg
 
Step 2:
  • Go to Solution Explorer.
  • Right-click on the application name.
  • Select an HTML page and rename it.
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


Similar Articles