Скачиваем картинку и кнопка скачать в отдельном окне js

Скачать картинку по клику. Перед нами стоит задача - кликнуть по картинке и скачать её. Реализация скачивания картинки может быть разной!

Сегодня делал страницу и потребовалось по нажатию кнопки выходило новое окно и чтобы там была кнопка скачать картинку.

Нажать на картинку - скачать картинку.

1. Простой способ - нажать по картинке скачать картинку
2. Нажать по картинке - скачать картинку в новом окне.
3. Скачать картинку по классу.

Простой способ - нажать по картинке скачать картинку

Самый простой из всех способов - "нажать по картинке - скачать картинку" - разберем в этом пункте:

Нам понадобится, тег картинки со всем содержимым, в том числе и адресом на картинку:

<img src="//dwweb.ru/__img/__svg/bell/bell_95.svg">

Далее нам понадобится ссылка html? картинку помещаем внутрь ссылки

И добавляем атрибут download.

Соберем весь код вместе:

<a href=//dwweb.ru/__img/__svg/bell/bell_95.svg download>

<img src="//dwweb.ru/__img/__svg/bell/bell_95.svg">

</a>

Результат - скачать картинку нажав по ней






Нажать по картинке - скачать картинку в новом окне.

Результат можно скачать в архиве : здесь

Первый вариант - это конечно хорошо, но мне требуется немного другое.

Мне нужно, нажать по картинке и в новом окне появилась кнопка скачать картинку!

Давайте сделаем такой скриптик!

Поскольку... будет много кода, разного, не будем в подробностях... по минималка, что мы хотим получить:

Нажмите по любому изображению:

Скрипт загрузки картинки из модального окна!

Вообще, скрипт со стилями и примером получился очень длинный, поэтому его можно будет скачать отдельным архивом.

Кратко работа скрипта загрузка картинки из модального окна!

У нас должна быть картинка вида(класс можно назначить любой, это же название нужно прописать в скрипте):

<img class="download" src="//dwweb.ru/__img/__svg/bell/bell_84.svg">

Определяем по условию, что нажали по нашему классу.

if (e.target.className =="download")

Из src получаем адрес картинки и открываем модальное окно

В модальном окне есть ссылка с атрибутом download

Ну и далее нажимаем по ссылке и загружаем картинку на компьютер!




Скачать картинку по классу.

Здесь такая история... на сайте потребовалось сделать кнопку по скачиванию картинки... опять все непонятно где... где стили, где кнопки... окно затемнения...

В общем, я был ЗОЛ в очередной раз, что приходится так много терять времени!

Достало!

Что сделаем!?

Это будет аналогично предыдущему пункту, только с той разницей,

что стили,

кнопка,

скрипт будут в одном месте!

И окно будет создаваться с помощью скрипта!

И также удаляться!

Html картинки:

Аналогично... в тег img добавляем класс → class="download"

<img src="//dwweb.ru/__img/__svg/bell/bell_80.svg" class="download">

Пишем скрипт, который сделает все остальное самостоятельно!

Размещаем парочку картинок с классом "скачать картинку"

Пример использования скрипта по скачиванию картинки по классу:

Для демонстрации скрипта скачивания картинки по классу, нажмите по картинке...



Скачать скрипт скачивания картинки по классу:

Скачиваем на странице со всеми скриптами.

🞨

Название файла -
Скачать файл