May 26, 2020
How to Download Image on Button Click Using Javascript
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!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> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
div { display: flex; flex-direction: column; align-items: center; } img { height: 400px; width: 400px; } button { display: block; padding: 10px; margin-top: 10px; } |
Javascript:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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) } |