Convert Image URL To Base64 JavaScript Without Canvas
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Dikshita
In this tutorial we will show you the solution of convert image URL to base64 JavaScript without canvas, here for convert image to a base64 URL without canvas by XMLHttpRequest object and readAsDataURL method.
The readAsDataURL() method used to read the contents of the specified blob or file.
When the read operation is finished, the readyState becomes DONE and the loadend is triggered.
At that time the result attribute contains the data as a data, URL representing the files data as base64 encoded string.
Step By Step Guide On Convert Image URL To Base64 JavaScript Without Canvas :-
Here we sets image url, function with parameter at last with the method ‘getimgBase64’ then printed on console when result get returns from function definition.
In this method we passing that image link as ‘url’ and function as ‘callback’ within this we creating XMLHttpRequest object ‘xhr’.
Using ‘xhr’ object we opening url what we given as input of image url by open() method, then we sets it ‘responseType’ as ‘Blob’ and using send() method we sending this blob file to onload event.
There creating file reader object ‘reader’ then we appending reader with ‘readAsDataURL()’ method for reads whole content of blob file when finish it triggers onloadend event.
This event waiting for return result then when it gets result we send it to callback method then printed on console.
<!DOCTYPE html>
<html>
<head>
<title>GET IMAGE AS BASE64 URL WITHOUT CANVAS</title>
</head>
<body>
<script>
function getimgBase64(url,callback){
var xhr=new XMLHttpRequest();
xhr.onload=function(){
var reader=new FileReader();
reader.onloadend=function(){
callback(reader.result);
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET',url);
xhr.responseType='blob';
xhr.send();
}
getimgBase64('https://assets.entrepreneur.com/content/3x2/2000/1602623277-GettyImages-1204099658.jpg', function(dataUrl){
console.log('RESULT:',dataUrl);
});
</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 need to declare getimgBase64 method with specific image url and function with parameter. That parameter had final converted result so we printed on console when we gets.
- We defined getimgBase64 method with parameters ‘url, callback’, here we created XMLHttpRequest object for interact with server.
- Using that object we collecting image url by ‘GET’ in open() method then we sets ‘responseType’ as ‘Blob’ and using send() method we sending this blob to onload event.
- There we creating file reader object ‘reader’ for reads blob then using readAsDataURL() method we reads the contents of the specified blob. When its readyState is DONE it triggers to onloadend event there we sets result to callback parameter.
- 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 without canvas 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 with the help of canvas later we will see about that in detail.
I hope this tutorial on convert image URL to base64 JavaScript without canvas helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
