Как сохранить изображение из тэга IMG?

112

13 апреля 2022, 14:50

Проверяю один сайт и столкнулся с довольно глупой проблемой.

На сайте в HTML документе есть img:

<img src="https://link.com/generate_word_picture?rand=6409937820" alt="">

Мне нужно получить эту картинку. Но проблема заключается в том, что она генерируется абсолютно случайно (Даже с ?rand). Какими средствами JS можно вытянуть эту картинку из DOM, а не делать запрос на сервер за картинкой?

Answer 1

const img = document.getElementById('imgid')
img.onload = function(){
  const canvas = document.createElement('canvas')
  canvas.width = img.width
  canvas.height = img.height
  const ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  const base64 = canvas.toDataURL("image/png")
}

В "base64" будет ваша картинка закодированная в base64. Формат можно поменять, например "image/jpeg". Если хотите ее скачать ну можно например так:

const a = document.createElement("a");
a.href = "data:application/octet-stream;base64," + base64;
a.download = "imageName.png"
a.click();

А вообще скачать можно и без канваса:

const img = document.getElementById('imgid')
img.onload = function(){
  const a = document.createElement("a");
  a.href = img.src
  a.download = "imageName.png"
  a.click();
}