Скачиваем картинку и кнопка скачать в отдельном окне js
Скачать картинку по клику. Перед нами стоит задача - кликнуть по картинке и скачать её. Реализация скачивания картинки может быть разной!
Сегодня делал страницу и потребовалось по нажатию кнопки выходило новое окно и чтобы там была кнопка скачать картинку.
Нажать на картинку - скачать картинку.
- Простой способ - нажать по картинке скачать картинку
- Нажать по картинке - скачать картинку в новом окне.
- Скачать картинку по классу.
Простой способ - нажать по картинке скачать картинку
Самый простой из всех способов - "нажать по картинке - скачать картинку" - разберем в этом пункте:
Нам понадобится, тег картинки со всем содержимым, в том числе и адресом на картинку:
Далее нам понадобится ссылка html? картинку помещаем внутрь ссылки
И добавляем атрибут download.
Соберем весь код вместе:
<a href=//dwweb.ru/__img/__svg/bell/bell_95.svg download>
<img src="//dwweb.ru/__img/__svg/bell/bell_95.svg">
</a>
Результат - скачать картинку нажав по ней
Нажать по картинке - скачать картинку в новом окне.
Результат можно скачать в архиве : здесьПервый вариант - это конечно хорошо, но мне требуется немного другое.
Мне нужно, нажать по картинке и в новом окне появилась кнопка скачать картинку!
Давайте сделаем такой скриптик!
Поскольку... будет много кода, разного, не будем в подробностях... по минималка, что мы хотим получить:
Скрипт загрузки картинки из модального окна!
Вообще, скрипт со стилями и примером получился очень длинный, поэтому его можно будет скачать отдельным архивом.Кратко работа скрипта загрузка картинки из модального окна!
У нас должна быть картинка вида(класс можно назначить любой, это же название нужно прописать в скрипте):
Определяем по условию, что нажали по нашему классу.
Из src получаем адрес картинки и открываем модальное окно
В модальном окне есть ссылка с атрибутом download
Ну и далее нажимаем по ссылке и загружаем картинку на компьютер!
Скачать картинку по классу.
Здесь такая история... на сайте потребовалось сделать кнопку по скачиванию картинки... опять все непонятно где... где стили, где кнопки... окно затемнения...
В общем, я был ЗОЛ 
в очередной раз, что приходится так много терять времени!
Что сделаем!?
Это будет аналогично предыдущему пункту, только с той разницей,
что стили,
кнопка,
скрипт будут в одном месте!
И окно будет создаваться с помощью скрипта!
И также удаляться!
Html картинки:
Аналогично... в тег img добавляем класс →
Пишем скрипт, который сделает все остальное самостоятельно!
Размещаем парочку картинок с классом "скачать картинку"
Пример использования скрипта по скачиванию картинки по классу:
Для демонстрации скрипта скачивания картинки по классу, нажмите по картинке...
Скачать скрипт скачивания картинки по классу:
Скачиваем на странице со всеми скриптами.