Download Image with JavaScript

Download image with JavaScript

The problem is that jQuery doesn't trigger the native click event for <a> elements so that navigation doesn't happen (the normal behavior of an <a>), so you need to do that manually. For almost all other scenarios, the native DOM event is triggered (at least attempted to - it's in a try/catch).

To trigger it manually, try:

var a = $("<a>")
    .attr("href", "http://i.stack.imgur.com/L8rHf.png")
    .attr("download", "img.png")
    .appendTo("body");

a[0].click();

a.remove();

DEMO: http://jsfiddle.net/HTggQ/

Relevant line in current jQuery source: https://github.com/jquery/jquery/blob/1.11.1/src/event.js#L332

if ( (!special._default || special._default.apply( eventPath.pop(), data ) === false) &&
        jQuery.acceptData( elem ) ) {

Download image from URL on page load using Javascript

function downloadImage(url, name){
      fetch(url)
        .then(resp => resp.blob())
        .then(blob => {
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.style.display = 'none';
            a.href = url;
            // the filename you want
            a.download = name;
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
        })
        .catch(() => alert('An error sorry'));
}

<button onclick="downloadImage('https://m.media-amazon.com/images/M/MV5BMTAxMGRmODYtM2NkYS00ZGRlLWE1MWItYjI1MzIwNjQwN2RiXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_SX300.jpg', 'Download.jpg')" >DOWNLOAD</button>

<body onload="downloadImage('https://m.media-amazon.com/images/M/MV5BMTAxMGRmODYtM2NkYS00ZGRlLWE1MWItYjI1MzIwNjQwN2RiXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_SX300.jpg', 'Download.jpg')">

Download Images from image url stored in array with javascript or best alternative

Using the download attribute of an anchor should do the trick...

EDIT

download only works for same-origin URLs, or the blob: and data: schemes. ref

Since this is not your case, you will have to create a blob with each image and fortunately, that is easy with the fetch API.

const downloadAll = async () => {
  // Create and append a link
  let link = document.createElement("a");
  document.documentElement.append(link);

  const imgArr = document.querySelectorAll("img");
  for (let i = 0; i < imgArr.length; i++) {
    await fetch(imgArr[i].src)
      .then(res => res.blob()) // Gets the response and returns it as a blob
      .then(blob => {

        let objectURL = URL.createObjectURL(blob);

        // Set the download name and href
        link.setAttribute("download", `image_${i}.jpg`);
        link.href = objectURL;

        // Auto click the link
        link.click();
    })
  }
};

Tested on CodePen.

How to download an image from api in react without opening it?

The client side solution would only work if the requested image is NOT blocked by CORS policy.

  async function download(url) {
    const a = document.createElement("a");
    a.href = await toDataURL(url);
    a.download = "myImage.png";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }

  function toDataURL(url) {
    return fetch(url)
      .then((response) => {
        return response.blob();
      })
      .then((blob) => {
        return URL.createObjectURL(blob);
      });
  }

  function onClick() {
    download("https://github.githubassets.com/images/modules/profile/badge--acv-64.png");
  }

Complete working demo at codesandbox

If you have server access you can just add a Content-disposition header & then simply doing window.open(url, '_self') would download the image -

NGINX - add_header Content-disposition "attachment; filename=$1";

Download Image with JavaScript