Download image using javascript

Question

I would like to know how to download image using javascript. It downloads but shows failed error,

<div>
<button onClick=this.downloadImage(event, "http://example.net/media/image.png")>Download</button>
</div>  



  downloadImage = (event, image) => {
      var link = document.createElement('a');
      link.href = image.toDataUrl("image/png", 1.0);
      link.download = 'Download.png';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
  }

The parameter image does only contain the URL-string to you image. This should show something like "toDataUrl is not a function". — tuberains
– tuberains, Commented Mar 31, 2020 at 5:46

Paul Zaslavskij · Accepted Answer · 2020-03-31 05:30:20Z

1

You can use download API.

According Developer Mozilla's site, try it out:

function onStartedDownload(id) {
  console.log(`Started downloading: ${id}`);
}

function onFailed(error) {
  console.log(`Download failed: ${error}`);
}

var downloadUrl = "https://example.org/image.png";

var downloading = browser.downloads.download({
  url : downloadUrl,
  filename : 'my-image-again.png',
  conflictAction : 'uniquify'
});

downloading.then(onStartedDownload, onFailed);

Here is more info, https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/downloads/download

Btw, don't forget about CORS and it's limits.

answered Mar 31, 2020 at 5:30

Paul Zaslavskij

6424 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Download image using javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related