DEV Community

Cover image for Download Images using JavaScript πŸ“Έ
Sapan Bodiwala
Sapan Bodiwala

Posted on


Download Images using JavaScript πŸ“Έ

Let's say you're trying to add a feature to your site or app to allow users to download an image upon clicking a button. Should be pretty straight forward right? I thought so myself as I needed to add this feature when building an internal media library tool at Discovery.

I tried adding this feature by just adding the download attribute to an anchor tag and setting the href attribute to the image url (cross-origin url).

<a href='URL_HERE' download>Download image</a>
Enter fullscreen mode Exit fullscreen mode

Turns out that Chrome started ignoring download attributes that pointed to cross origin urls.

To solve this, we'll take advantage of the browser built in fetch method. You'll need to add an event listener to the element that you want to trigger the image download and call the below function:

// Using fetch
async function downloadImage(imageSrc) {
  const image = await fetch(imageSrc)
  const imageBlog = await image.blob()
  const imageURL = URL.createObjectURL(imageBlog)

  const link = document.createElement('a')
  link.href = imageURL = 'image file name here'
Enter fullscreen mode Exit fullscreen mode

The imageSrc function parameter represents the cross origin image url.

  1. First, we use fetch to get the ReadableStream data of the image
  2. Next, we call the blob method provided by fetch to get the raw image data
  3. Third, we use the URL Web API to call the createObjectURL static method to create a URL that represents the image's download URL
  4. Finally, an anchor element is created to set the new url to the href attribute. You can also set the name of the file by setting the download attribute of the anchor element. Last, we append the anchor element we created to the DOM and trigger a click to download the image and then quickly remove the anchor from the document.

And there you go! You now have the ability to download images on the trigger of a function!

I hope this helped and was useful for you!

This post can also be found at

Top comments (10)

semleel profile image
Yi Sem

it works!! thanks alot

amirjafari1992 profile image
Amir Jafari

You made my day man! Thank you for sharing

san profile image

Thanks dude!

akashkaintura profile image

Not Helpful

vishwakarmad1999 profile image
Divya Vishwakarma

Mota bhai this doesn't work when there's CORS restriction!!!
It will fail at the first fetch call itself.

woochul profile image
Woochul Lee

It works well. Thanks.

uzair004 profile image
Muhammad Uzair

What if image can't be fetched from its source ? it there any other way to get image from DOM ?

daddasoft profile image
Dadda Hicham

best one thanks πŸ‘

devslayertech profile image
Dev Slayer.Tech

Poo performance when using base64 > 1MB in src

Visualizing Promises and Async/Await 🀯

async await

☝️ Check out this all-time classic DEV post