Как получить URL изображения на веб-странице?

Question

Я разрабатываю расширение для Chrome, которое потребовало бы от меня сохранения изображения с использованием контекста правой кнопки мыши. Как мне скопировать «Копировать адрес изображения» в Chrome, используя JavaScript? Мне просто нужно получить URL файла изображения.

Answer 1

Может быть, что-то вроде этого поможет:

window.location.origin + document.getElementById({imgId}).getAttribute('src');

Рабочий пример на главной странице Google:

window.location.origin + document.getElementById('hplogo').getAttribute('src');

Answer 2

Если вы хотите выбрать все изображения, вы должны выбрать все изображения, например, с помощью document.getElementsByTagName('img')

Результатом выделения является HTMLCollection, которую можно преобразовать в массив. Затем вы просматриваете все изображения и добавляете событие правого клика (contextmenu) ко всем изображениям.

Если вы щелкнете правой кнопкой мыши по изображению, функция getURL даст вам путь (this.src)

const allImgs = document.getElementsByTagName('img');

function getURL(e) {
  e.preventDefault();
  console.log(this.src);
}

Array.from(allImgs).forEach(img => {
  img.addEventListener('contextmenu', getURL);
})

right click on images
<br>
<img src="https://www.gravatar.com/avatar/0adefd53a9e8790b181785c11f458615?s=48&amp;d=identicon&amp;r=PG&amp;f=1">
<br>
<img src="https://i.stack.imgur.com/rj5lM.png?s=32&amp;g=1">