Я нашел сообщения на эту тему, но большинство примеров основаны на 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>
Если я правильно понимаю ваш вопрос, то вы можете сделать следующее:
href
якорных элементовИтак, что-то вроде этого должно работать для вас:
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>
background-image
и добавить как тегimg
?