Получить background-image div'а без повторной загрузки изображения

Question

Если у контейнера стиль background-image: url , то можно ли средствами js получить это изображение, не загружая его повторно? сам url получить получается, но загружать снова по этому адресу - не вариант, картинка меняется.

Может есть ещё какие-нибудь возможности (устроило бы даже меню ПКМ, но у таких изображений нет пунктов, связанных с копирование и сохранением изображения). Единственный пока вариант -заходить в консоль разработчика, в ресурсы и там находить это изображение руками и сохранять.

Ниже код для получения ссылки, если вдруг кому-нибудь пригодится.

function
 getElementByXpath(path) {
  return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}


var div_element = getElementByXpath("//html/body/div..."),
    style = div_element.currentStyle || window.getComputedStyle(div_element, false),
    bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");
console.log(bi)

Answer 1

Если вы хотите получить base64 изображение, то хотите ли вы того или нет, вам нужно сделать на него запрос.

let imageURL = 'https://upload.wikimedia.org/wikipedia/commons/5/53/The_entrance_to_Carlton_Town_football_club_-_geograph.org.uk_-_793919.jpg'

fetch(imageURL).then(r => r.blob()).then(b => {
  let reader = new FileReader()
  reader.onloadend = function() {
    console.log(reader.result)
  }
  reader.readAsDataURL(b)
})

БЛОГ НА HUSL

Получить background-image div'а без повторной загрузки изображения

Ответы (1 шт):