How to Download Image on Button Click in JavaScript?

Last Updated : 31 May, 2024

Downloading an image on a button click in JavaScript involves creating a mechanism to trigger the download action when a user clicks a button.

Below are the approaches to download image on button click in JavaScript:

Table of Content

Using Anchor Tag with Download Attribute
Using Fetch API

Using Anchor Tag with Download Attribute

The "download" attribute in an anchor tag enables direct file downloads from a specified URL when clicked, bypassing the browser's default behaviour of opening the file. It specifies the filename for the downloaded file, simplifying the download process for users and improving overall user experience.

Example: In this example a button labelled Download Image, which, upon click, dynamically generates an anchor element to download an image from a specified URL and the image is downloaded with the filename img.jpg.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Image Downloader</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        #downloadBtn {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        #downloadBtn:hover {
            background-color: #0056b3;
        }
    </style>
</head>

<body>

    <button id="downloadBtn">Download Image</button>

    <script>
        document
            .getElementById('downloadBtn')
            .addEventListener('click', function () {
                const link = document
                    .createElement('a');
                //link to the uploaded image
                //  in your local storage
                link
                    .href = 'car2.jpg';
                link
                    .download = 'img.jpg';
                document
                    .body
                    .appendChild(link);
                link
                    .click();
                document
                    .body
                    .removeChild(link);
            });
    </script>

</body>

</html>

Output:

Using Fetch API

Using the Fetch API, an image is fetched asynchronously. The response, typically containing the image data, is converted into a Blob object. This Blob is transformed into a temporary URL. A dynamic anchor element is created with the URL and desired file name. The anchor is then clicked programmatically to start the download and removed for cleanup.

Example: To demonstrate creating a "Download Image" button. Clicking it fetches an image from a specified URL via a CORS proxy using JavaScript. The response is converted to a Blob object and downloaded as img.jpg.