Мобильная версияЯ использую unsplash API для показа изображений. Я хочу загрузить изображение, когда пользователь нажимает на значок загрузки, но я не знаю, как добавить эту функцию. Вот что я сделал до сих пор. В приведенном ниже коде я получаю изображения из API unsplash и отображаю их в imageContainer с помощью сетки отображения:
Вот мой HTML:
Вот мой js:
let imageContainer = document.querySelector(".imageContainer"); let imgShowed = document.querySelector(".imgShowed"); пусть контейнер = document.querySelector(".container"); let crossIcon = document.querySelector(".crossIcon"); пусть downloadIcon = document.querySelector(".downloadIcon") // функция для получения изображения функция getimage() { imageContainer.innerHTML = ""; (URL = "https://api.unsplash.com/search/photos?query=" + входное значение + "&per_page=1200&client_id=5OXcnxdQpZLtAG0_jRNpqEQhTlUOQL3TKviFAUbBKm8"), получить (URL-адрес) .then((ответ) => { вернуть ответ.json(); }) .then((данные) => { data.results.forEach((element) => { let Div = document.createElement("Div"); Div.setAttribute("класс", "imgDiv"); Div.setAttribute("data-downloadurl", `${element.links.download}`); let img = document.createElement("img"); img.src = `${element.urls.regular}`; Div.appendChild(img); document.querySelector(".imageContainer").appendChild(Div); всплывающее изображение() }); }); } document.getElementById("btn").addEventListener("click", getimage); // функция всплывающего окна изображения функция imagepopup(){ let imgDiv = document.querySelectorAll(".imgDiv"); imgDiv.forEach(element => { element.addEventListener("click",(e)=>{ контейнер.стиль.дисплей="блок" пусть цель = e.currentTarget пусть clickedimagesrc = target.firstChild.src imgShowed.innerHTML=`
` downloadIcon.addEventListener("click",()=>{ пусть url=target.dataset.downloadurl скачатьIMG (ссылка) }) }) }); } функция загрузкиIMG(){ const link = document.createElement('a'); link.style.display = 'нет'; link.href = URL.createObjectURL(url); ссылка.загрузка = файл.имя; ссылка.клик(); }
