How To Download Image On Button Click Using JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Amruta
In this tutorial we will show you the solution of how to download image on button click using JavaScript, here we need to use external file that can support for download an image so we used FileSaver external script file.
This had inbuilt method to saves images on client side i.e saveAs() method which needs two parameters image path and image name so we retrieving those information by img tag’s ‘src’ attribute value. Then we can easily download any images on button click.
Step By Step Guide On How To Download Image On Button Click Using JavaScript :-
Here we defined img tag for displaying image which is being downloaded when click on button ‘Download’.
In script we collecting html elements of ‘img, button’ and referred by variables ‘bd,img’ and then we added eventlistener for verify when button clicked by users.
Within this we collecting ‘src’ attribute values and stored on variable ‘impath’ then we called getFileName method with this parameter there we extracting file name and returns.
Finally using saveAs() method we saving image on client side machine.
<!Doctype html>
<html>
<head>
<title>DOWNLOAD IMAGE ON BUTTON CLICK</title>
</head>
<body>
<div>
<img src="images/abt.jpg">
<button>Download</button>
</div>
<script>
let bd=document.querySelector('button');
let img=document.querySelector('img');
bd.addEventListener('click',()=>{
let impath=img.getAttribute('src');
let fn=getFileName(impath);
saveAs(impath,fn);
});
function getFileName(str){
return str.substring(str.lastIndexOf('/')+1);
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js"></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.
- Here we defined div element within that we defined img tag for display image which will we be downloaded on button click and a button ‘Download’ defined.
- In script we collecting two html elements ‘img,button’ then it’s referred by variables ‘img,bd’ and we adding addEventListener with ‘click’ for load function when user clicks button ‘Download’.
- Here we collecting image path by ‘src’ attribute value in img tag and stored on variable ‘impath’. getFileName() function call initialized with variable ‘impath’ passed as parameter.
- In getFileName(str) function we finding last ‘/’ symbol from that path then from next position we extracts file name successfully then updated on str variable and returned to function.
- Here we stored file name on variable ‘fn’ then we passing ‘impath,fn’ variables to saveAs() method for saving files on client side machine.
- Those methods need FileSaver script library supports so we need to import at last otherwise it throws error and we can’t save.
- 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 download image on button click using javascript.
When we executing this program on browser we can see inserted image with Download button when user clicks on download button that inserted image will successfully saved on client machine as a file.
We can insert any image on webpage then we can download that image easily by using this concept the only difference is need to change image path then we can achieve result.
I hope this tutorial on how to download image on button click using JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
