Как копировать ссылку из background-image?

Question

[Ivan00028]

Может кто подскажет как с помощью скрипта, можно скопировать ссылку в браузере картинки находящаяся в "style="background-image: url"

Answer 1

[Renat Grishin]

// Обращаем внимание на селектор по которому мы будем искать картинку, например это будет class="gift"
<div class="gift" style="background-image: url(//img2.reactor.cc/pics/post/full/Diona-%28Genshin-Impact%29-Genshin-Impact-%D1%84%D1%8D%D0%BD%D0%B4%D0%BE%D0%BC%D1%8B-nyaruin-6451680.png); " aria-label="null"><img src="/mres/img6/t.gif" width="24" class="gift-control" height="24"></div>

// Ищем элемент по классу gift и получаем у него css свойство background-image
const elemLink = document.querySelector(".gift").style.backgroundImage.slice(7,-2);

// Далее делаем с этой ссылкой что хотим, например выводим в консоль
console.log(elemLink);

Comments

[Ivan00028]

Тоже в консоли пишет undefined

[Ivan00028]

Ivan00028, пишет undefined

[Renat Grishin]

Ага, возможно элементов с этим классов несколько. Попробуй так:

const elemLink = document.querySelectorAll(".gift"); // ищем все элементы с классом gift
let imgArr = [];
elemLink.forEach(elem=>{ // перебираем все полученные элементы
    if(elem.style.backgroundImage){ // проверяем есть ли у этих элементов стиль background-image
        imgArr.push(elem.style.backgroundImage.slice(7,-2)); //если есть, то обрезаем ненужные символы в начале и в конце, и добавляем в конец массива imgArr
    }
});
//Получаем массив с ссылками imgArr, можно вывести в консоль
console.log(imgArr);

[Ivan00028]

Renat Grishin, Пишет в консоли Uncaught SyntaxError: Unexpected identifier 'есть'

[Renat Grishin]

Ivan00028, попробуй скопировать еще раз, ты скопировал код, до того как я исправил ошибку с комментарием)

[Ivan00028]

Тоже самое по ходу не как

[Ivan00028]

Renat Grishin, перепутал не работе пишет в мозиле
Uncaught SyntaxError: redeclaration of let imgArr
debugger eval code:1

[Renat Grishin]

Ivan00028, Странно, давай попробуем просто найти все элементы

const elemLink = document.querySelectorAll(".gift");
elemLink

[Ivan00028]

Renat Grishin,
выдает

NodeList(40) [div.gift, div.gift.js-call, div.gift, div.gift, div.gift.js-call, div.gift.js-call, div.gift, div.gift.js-call, div.gift.js-call, div.gift.js-call, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift]

[Ivan00028]

Renat Grishin,

вот что нашел

[Renat Grishin]

Ivan00028, Прекрасно, это значит что элементы он у нас находит
Давай попробуем вывести ссылки картинки в консоль, при клике на элементы которые соержут у себя фотонм картинку

const elemLink = document.querySelectorAll(".gift"); // ищем все элементы с классом gift

elemLink.forEach(elem=>{ // перебираем все полученные элементы
    if(elem.style.backgroundImage){ // проверяем есть ли у этих элементов стиль background-image
        elem.onmousedown = function(e) {
            if (e.which == 3) {  // Нажата правая кнопка мыши
                let imgLink = elem.style.backgroundImage.slice(7,-2);
                console.log(imgLink)       
            }

        }
    }
});

[Ivan00028]

Renat Grishin, не получается
undefined

[Ivan00028]

Renat Grishin,

[Renat Grishin]

Ivan00028, это норм что undefined выходит, мы в кносоли по итогу скрипта ничего не возвращаем для вывода
После того как ввели этот код в консоль, попробуй нажать правой кнопкой мыши по элементу с классом gift у которого фоном есть картинка. Должно в консоль выпасть ссылка

[Ivan00028]

Renat Grishin, Не чего не выпадает сделал как вы сказали

[Ivan00028]

Renat Grishin, заработало в другом браузере а как в буфер что бы сохраняло а не в консоль выводило ? и появляются две ссылки а картинка одна.

[Ivan00028]

Renat Grishin, А можно как нибудь копировалось в буфер при нажатии правой кнопкой ссылка ?

[Renat Grishin]

Ivan00028, Для передачи данных в буфер обмена можно воспользоваться navigator.clipboard.writeText("Текст который уйдет в буфер обмена");

const elemLink = document.querySelectorAll(".gift"); // ищем все элементы с классом gift

elemLink.forEach(elem=>{ // перебираем все полученные элементы
    if(elem.style.backgroundImage){ // проверяем есть ли у этих элементов стиль background-image
        elem.onmousedown = function(e) {
            if (e.which == 3) {  // Нажата правая кнопка мыши
                let imgLink = elem.style.backgroundImage.slice(7,-2);
                navigator.clipboard.writeText(imgLink); // копируем ссылку в буфер обмена
            }
        }
    }
});

И тут есть один нюанс. Браузеры защищают пользователя от копирования данных в буфер. И для того чтобы пользователь смог скопировать данные 2ой кнопкой мыши, он должен хотя бы раз кликнуть по сайту.

[Ivan00028]

Renat Grishin, а можно перевести в одну строку как нибудь так
javascript:const elemLink = document.querySelectorAll(".gift");elemLink.forEach(elem=>{if(elem.style.backgroundImage){elem.onmousedown = function(e) {if (e.which == 3) {let imgLink = elem.style.backgroundImage.slice(7,-2);navigator.clipboard.writeText(imgLink);}}}});

только так выдает ошибку

[Ivan00028]

Renat Grishin, Все работает но когда код запускаешь на телефоне сенсором не работает прикосновение можешь помочь?

[Renat Grishin]

Ivan00028, Можно добавить еще один слушатель событий касания

const elemLink = document.querySelectorAll(".gift"); // ищем все элементы с классом gift

elemLink.forEach(elem=>{ // перебираем все полученные элементы
    if(elem.style.backgroundImage){ // проверяем есть ли у этих элементов стиль background-image
        let imgLink = elem.style.backgroundImage.slice(7,-2);
        elem.onmousedown = function(e) {
            if (e.which == 3) {  // Нажата правая кнопка мыши
                navigator.clipboard.writeText(imgLink); // копируем ссылку в буфер обмена
            }
        }
        elem.addEventListener('touchstart',  e=>{// событие когда нажимаем на элемент
            if(e.touches.length === 2){ //проверяем на двойное касание
                navigator.clipboard.writeText(imgLink);
            }
        });
    }
});

[Renat Grishin]

Ivan00028, По счет JS в одну строку, можешь использовать минимайзер JS

[Ivan00028]

Renat Grishin, на Android не копирует выдает ошибку такую может знаешь что такое
"uncaught (in promise) notallowederror write permission denied"

[Renat Grishin]

Ivan00028, Возможно в настройках браузера, нужно дать твоему сайту разрешение на доступ к буферу обмена.
Есть второй вариант с реализацией собственного метода копирования в буфер

[Ivan00028]

Renat Grishin, а можно под другому переделать код без const

[Ivan00028]

Renat Grishin, ?

Answer 2

[Олег]

<div style="background-image: url(path_to_img)">

</div>

let imUrl = document.querySelector('div')
console.log(imUrl.style.backgroundImage)

Comments

[Ivan00028]

выдает undefined

[Олег]

Ivan00028,

[Ivan00028]

Олег,

<li class="it grid_li __double">
  <div class="gift-card __ru __live __large  __sale __no-frame __with-blur __refactoring" aria-label=""><div style="background-image: url(//img2.reactor.cc/pics/post/full/Diona-%28Genshin-Impact%29-Genshin-Impact-%D1%84%D1%8D%D0%BD%D0%B4%D0%BE%D0%BC%D1%8B-nyaruin-6451680.png)" class="gift-blur"></div>
<div class="gift" style="background-image: url(//img2.reactor.cc/pics/post/full/Diona-%28Genshin-Impact%29-Genshin-Impact-%D1%84%D1%8D%D0%BD%D0%B4%D0%BE%D0%BC%D1%8B-nyaruin-6451680.png); " aria-label="null"><img src="/mres/img6/t.gif" width="24" class="gift-control" height="24"></div>
<div class="gift-price "><span class="gift-price_icon"></span>
<span class="gift-price_text"></span>
</div><a aria-label="" href="" class="gift-link"></a></div></li>

из такого кода

[Ivan00028]

не получается из этого кода извлечь

[Олег]

Ivan00028, https://jsfiddle.net/xdaf02oh/

[Ivan00028]

Олег, там много картинок не работает пишет
undefined