May 26, 2020

How to Download Image on Button Click Using Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to download image on button click using javascript. We are going to use FileSaver.js to accomplish the job. This library will help you download any kind of file using javascript. I recommend you go through FileSaver.js docs to learn how efficiently you can use this.

At the time of creating the tutorial, FileSaver.js v2.0.3 has some issues, so I am using v2.0.2 here. Maybe they will fix the bug in the future and you can use the latest one. You can download this library or you can use the CDN link. I have downloaded it and included it using the script tag in the HTML.

In the following example, we have one image and a button. Upon click of the button, image downloading will start. Please have a look over the code example and steps given below for a detailed explanation.

HTML & CSS

We have 3 elements in the HTML file (div, button, and img). The div element is just a wrapper for the rest of the elements.

The inner text for the button element is “Download”.
We are using an external image as a source with an img tag. You can change it to a different URL of your choice.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.

We have included FileSaver.min.js with a script and that will take care of downloading part.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div>
       <img src="https://i.imgur.com/sduLRvf.jpg" alt="">
       <button>Download</button>
    </div>

    <script src="js/FileSaver.min.js"></script>
    <script src="js/script.js"></script>
</body>
</html>

div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

img {
    height: 400px;
    width: 400px;
}

button {
    display: block;
    padding: 10px;
    margin-top: 10px;
}

Javascript

We have selected two elements button and img using the document.querySelector() method and stored them in btnDownload and img variables respectively.
We have attached the click event listener to the button element.
We are getting the source of the image by calling the getAttribute() method with src string as a parameter on the img element and storing it in the imagePath variable.

We have created the getFileName() method which will take a string as a parameter and will return the name of the file along with its extension. In our case, it will return sduLRvf.jpg
We are storing the name of the image in the fileName variable.
We are simply calling saveAs() method of FileSaver.js and passing it imagePath and fileName as parameters. As soon as this function executes, our image downloading will start.

let btnDownload = document.querySelector('button');
let img = document.querySelector('img');


// Must use FileSaver.js 2.0.2 because 2.0.3 has issues.
btnDownload.addEventListener('click', () => {
    let imagePath = img.getAttribute('src');
    let fileName = getFileName(imagePath);
    saveAs(imagePath, fileName);
});

function getFileName(str) {
    return str.substring(str.lastIndexOf('/') + 1)
}

You May Also Like: