Get Image Data URL in JavaScript

Javascript Web Development Front End Technology

To obtain the canvas's image data URL, we can use the canvas object's toDataURL() method, which converts the canvas drawing into a 64 bit encoded PNG URL. You can pass image/jpeg as the first argument to the toDataURL() method if you want the image data URL to be in jpeg format.

You can control the image quality for a jpeg image by passing a number between 0 and 1 as the second argument to the toDataURL() method. Any images drawn onto the canvas must be hosted on a web server with the same domain as the code executing it, according to the toDataURL() method. A SECURITY_ERR exception is thrown if this condition is not met.

Example 1

This example demonstrates the process of getting image URL in JavaScript ?



<!DOCTYPE html>
<html>
<head>
   <title>Get URL of Image</title>
</head>
<body>
   <input type='f' onchange="readURL(this);" />
   <br />
   <br />
   <button id="tCD" onclick="togCan()">Hide canvas</button> <button id="tDU" onclick="togDU()">DataURL hide</button>
   <br/>
   <br/>
   <textarea id="dU" rows="4" cols="100">
   </textarea>
   <br/>
   <canvas id="myCan"></canvas>
   <script>
      function rdURL(ip) {
         if (ip.files && ip.files[0]) {
            var reader = new FileReader();
            reader.addEventListener(
               "load",
               function() {
                  var avatarImg = new Image();
                  var src = reader.result;
                  avatarImg.src = src;
                  document.getElementById("dU").innerText = src;
                  avatarImg.onload = function() {
                     var c = document.getElementById("myCan");
                     var ctx = c.getContext("2d");
                     ctx.canvas.width = avatarImg.width;
                     ctx.canvas.height = avatarImg.height;
                     ctx.drawImage(avatarImg, 0, 0);
                  };
               },
               false
            );
            reader.readAsDataURL(ip.files[0]);
         }
      }
      function togCan() {
         var canvas = document.getElementById("myCan");
         if(canvas.style.display == "none"){
            canvas.style.display = "block";
            document.getElementById("tCD").innerText = "Canvas hide";
         }
         else {
            canvas.style.display = "none";
            document.getElementById("tCD").innerText = "Canvas show";
         }
      }
      function toggleDataUrl() {
         var area = document.getElementById("dU");
         if(area.style.display == "none"){
            area.style.display = "block";
            document.getElementById("tDU").innerText = "Data url hide";
         }
         else {
            area.style.display = "none";
            document.getElementById("tDU").innerText = "Data url show";
         }
      }
   </script>
</body>
</html>

Example 2

Following is another example of reading a file using JavaScript ?



var fs = require("fs");
console.log("Going to write into existing file");

// Open a new file with name input.txt and write Simply Easy Learning! to it.
fs.writeFile('input.txt', 'Simply Easy Learning!', function(err) {
   if (err) {
      return console.error(err);
   }
   console.log("Data written successfully!");
   console.log("Let's read newly written data");

   // Read the newly written file and print all of its content on the console
   fs.readFile('input.txt', function (err, data) {
      if (err) {
         return console.error(err);
      }
   console.log("Asynchronous read: " + data.toString());
   });
});

Abdul Rawoof

Updated on: 2023-07-19T14:51:58+05:30

6K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started