Сохранение изображения из URL-адреса div-фона в виде обычного javascript без jquery и т. Д.

1

Я нашел сообщения на эту тему, но большинство примеров основаны на jQuery, как я могу сохранить изображение из URL-адреса div background-image

/*????*/
.x{
  background-color: red;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100px;
  height: 100px;
  display: inline-block;
}
<div class='x' style='background-image: url(https://wallpapertag.com/wallpaper/full/c/4/1/145845-grand-canyon-wallpaper-1920x1200-for-android.jpg);'></div>
<div class='x' style='background-image: url(https://de.zopix.net/image_upload/117969-landschaften-sunset-evening-clouds.jpg);'></div>
<div class='x' style='background-image: url(http://www.wallpapereast.com/static/images/Sunset-Village-Wallpaper.jpg);'></div>
  • 0
    что вы подразумеваете под тем, как я могу сохранить изображение из URL-адреса фонового изображения div ? Вы хотите удалить его из свойства background-image и добавить как тег img ?
  • 0
    Откройте отладчик вашего браузера. Перейдите на вкладку Сеть, выберите ИЗОБРАЖЕНИЯ. Перезагрузите страницу. Вы можете увидеть все изображения на странице. Щелкните правой кнопкой мыши - откройте в новой вкладке, щелкните правой кнопкой мыши, сохраните.
Показать ещё 3 комментария
Теги:

1 ответ

1

Если я правильно понимаю ваш вопрос, то вы можете сделать следующее:

  1. Извлеките URL изображения из стиля обрабатываемого элемента.
  2. Создать временный элемент привязки (используется для запуска загрузки)
  3. Назначьте URL изображения в качестве атрибута href якорных элементов
  4. Добавьте привязку к документу, вызовите действие click (для запуска загрузки)
  5. Очистите, удалив временную привязку из вашего документа

Итак, что-то вроде этого должно работать для вас:

function downloadBackgroundImage(element) {
  
  // get the backgroundImage of the passed DOM element
  const backgroundImage = element.style.backgroundImage;
  
  // sanitize the backgroundImage style value by removing url(..)
  // to get a value suitable for the href attribute below
  const imageURL = backgroundImage.slice(4, -1).replace(/"/g, "");
  
  // extract image filename for download attribute
  const imageFilename = imageURL.slice(imageURL.lastIndexOf("/") + 1);
  
  // create a temporary anchor element and set the href attribute
  // and add it to our DOM
  var a = document.createElement("a");
  a.setAttribute("href", imageURL);
  a.setAttribute("download", imageFilename);
  
  document.body.appendChild(a);

  // invoke the click behavior to trigger download
  a.click();

  // housekeeping - remove the temporary anchor element
  a.remove();  
}


downloadBackgroundImage( document.querySelector('.x') )
<div class='x' style='background-image: url(https://wallpapertag.com/wallpaper/full/c/4/1/145845-grand-canyon-wallpaper-1920x1200-for-android.jpg);'></div>
  • 0
    Спасибо за ответ, но он продолжает перенаправлять меня на изображение. Я не хочу, чтобы я мог щелкнуть правой кнопкой мыши по любому из этих элементов и сохранить его источник изображения.
  • 0
    в качестве изображения на мой рабочий стол в виде файла изображения
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню