Convert Image URL To Base64 JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Anjali
In this tutorial we will show you the solution of convert image URL to base64 JavaScript, here for convert image to a base64 URL by loading the image with the given URL into the canvas and then call toDataURL() to convert it to base64.
The toDataURL() method returns a data URL containing a representation of the image in the format specified by the type parameter. Here we given as ‘image/png’ format.
Step By Step Guide On Convert Image URL To Base64 JavaScript :-
Here we sets image url at last with the method ‘getimgBase64’, in this method we passing that image link as ‘url’ then we creating image object ‘img’.
We need to make a CORS request so we sets attribute 'crossOrigin','anonymous' on image object ‘img’ by setAttribute() method and we need to loading object ‘img’ into canvas.
So that we creating canvas element and sets it height, width to image size respectively then using getContext() method we get access to canvas 2d drawing and using drawImage() method we drawn on canvas.
Finally using toDataURL() method we gets URL to base64 format then printed result on console.
<!DOCTYPE html>
<html>
<head>
<title>GET IMAGE AS BASE64 URL</title>
</head>
<body>
<script>
const getimgBase64=(url)=>{
const img=new Image();
img.setAttribute('crossOrigin','anonymous');
img.onload=()=>{
const canvas=document.createElement("canvas");
canvas.width=img.width;
canvas.height=img.height;
const ctx=canvas.getContext("2d");
ctx.drawImage(img,0,0);
const dataurl=canvas.toDataURL("image/png");
console.log(dataurl);
}
img.src=url;
}
getimgBase64('https://assets.entrepreneur.com/content/3x2/2000/1602623277-GettyImages-1204099658.jpg');
</script>
</body>
</html>- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- In script we defining getimgBase64 method with specific image url at last for declare function call with parameter.
- We defined ‘getimgBase64’ method there we passed image url to variable ‘url’ within that we creating image object ‘img’ by ‘new Image’ statement.
- We need to make anonymous-cross-origin request so we used setAttribute() method with parameters as 'crossOrigin','anonymous'.
- Using onload event we sets it value as proceed function to convert base64 url. There first we created element ‘canvas’ as we seen above for that conversion must thing is canvas.
- Then we sets canvas size of height, width to respective image size and passing canvas object with getContext(‘2d’) method for getting access to draw 2d.
- Using drawImage() method we finally drawn into canvas now we need to use toDataURL() method for convert the image url into base64 format then finally we printed on console.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to convert image url into base64 format using JavaScript.
When we executes program on browser we need to open console because we printed converted base64 format at console panel.
So we have to use shortcut ‘ctrl+shift+j’ then console panel will open with result of base64 format of our specified image url.
We can also do this without canvas later we will see about that in detail.
I hope this tutorial on convert image URL to base64 JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
