Скачиваем картинку и кнопка скачать в отдельном окне 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>

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



Скопировать ссылку



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

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


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

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

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

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

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

Давайте совсем вкратце пробежимся, что да как работает!?

Нажимаем по картинке.

Скрипт определяет по какой картинке нажали.

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

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

Что будем использовать:

Нам потребуется модальное окно, которое разбирали здесь.

Добавим внутрь две строчки:

<h2>Название файла - <span id="url"></span></h2>
<a id="download" href="" download>Скачать файл</a>


По клику на картинку нам потребуется addEventListener в "Script" помещаем функцию, в которой и будем все делать

Получаем данные из src - странно, но темы нет. Выделено красным о download ниже... пункт 5.

download.href = suzi_quatro.target.src;

При нажатии на картинку, открываем модальное окно, отправляем "display:block".

zatemnenie.style="display:block";

Одновременно оправляется(выделено красным) ссылка в 'href=""', в ' id="download" ' см. выше пункт 2.

download.href = suzi_quatro.target.src;

Разбираем полученную ссылку в массив:

var array = suzi_quatro.target.src.split ("/");

Получаем последний элемент массива - для вывода названия файла.

url.innerHTML= array[array.length - 1];

close_window - наверное и так понятно, что оно делает! См ниже:

Соберем весь код вместе: Весь код html + css + javascript получился очень длинным, чтобы его здесь выкладывать, скачиваем здесь

🞨
Название файла -
Скачать файл
Скопировать ссылку



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

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

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

Достало!

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

Будем скачивать картинку по классу! Для этого нам понадобится:

В тег img добавляем класс → class="download"

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

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

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

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

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



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

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

---

Комментариев : 1 COMMENTS+   BBcode

🞨

Загрузить свой аватар

(max ширина, высота = 200px)

Подписаться + =

23/04/2021 04:35 Марат ... Пожаловаться Скопировать ссылку

🞨

По умолчанию, текст при блокировке:

Комментарий заблокирован администратором сайта

Для изменения текста блокировки введите новый текст ниже:

Заблокировать

Страница обновлена - добавлен скрипт - всё в одном. Скачивание картинку по классу!

Ответить Теги:
скачать картинку Скачиваем картинку и кнопка скачать в отдельном окне js Скачиваем картинку по классу javascript