JS - Изменить ссылку и вызвать загрузку изображения при нажатии на ссылку

Question

Я пытаюсь загрузить изображение, используя атрибут download в теге <a>.Его значение href обновляется при нажатии.

function Download_Image(element) {
  var mydiv = $("#imageDiv");
  var Image = mydiv[0].children;
  
  mydiv.download = Image[0].src;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="imageDiv">
  <img
    width="200"
    height="140"
    src="https://2.bp.blogspot.com/-pjQRansD-ig/XAUEH2oe8tI/AAAAAAAAHwE/BgZOyaGnQLYhH2Zjxx86BRvyOs8o9yGjgCLcBGAs/s200/16e3d864-8fb8-4f43-b91e-cc97a75c602f.jpg" />
</div>

<a href="#" onclick="Download_Image(this)" download>Click here to download image</a>

Однако, когда я нажимаю на ссылку, он загружает всю HTML-страницу вместо изображения.

Answer 1

Вам необходимо изменить атрибут href элемента <a>, а не атрибут download <div>.

В любом случае атрибут download не поддерживаетсяво всех браузерах и может не работать в некоторых других, если заголовок Content-Disposition: attachment не установлен.

Например, если мы используем изображение из Instagram со следующим кодом, оно будет работать, только если выдобавьте ?dl=1 в конце URL:

const links = document.getElementById('links');
const image = document.getElementById('image');

links.onclick = (e) => {
  const link = e.target;
  
  if (link.tagName !== 'A') {
    return;
  }
    
  link.href = `${ image.src }${ link.innerText.includes('WITHOUT') ? '' : '?dl=1' }`;
}

body {
  height: 100vh;
  margin: 0;
  font-family: monospace;
  display: flex;
  align-items: center;
}

#image {
  margin: 8px;
  height: calc(100vh - 16px);
}

#links {
  display: flex;
  flex-direction: column;
}

#links > a {
  display: block;
  padding: 8px;
  line-height: 14px;
  margin: 4px 0;
  color: black;
  text-decoration: none;
  border: 3px solid black;
  border-radius: 2px;
}

#links > a:hover {
  background: yellow;
}

<img id="image" src="https://scontent-mad1-1.cdninstagram.com/vp/e96d73e7938825335c235baedb51e91a/5CAAC2D4/t51.2885-15/e35/46060357_1380937935382732_6380498939567322752_n.jpg" />

<div id="links">
  <a href="#" download>? WITHOUT HEADER</a>
  <a href="#" download>? WITH HEADER</a>
</div>

Вы можете взглянуть на библиотеку под названием download.js.