How to get image data url in JavaScript?


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()); }); });

Updated on: 19-Jul-2023

4K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements