Как сделать ссылку на скачивание картинки

Скачивание картинки по прямой ссылке в браузере

Нужно сделать так что бы по клику на картинку, она начинала скачиваться пользователю на компьютер. Ссылка на картинку приходит от сервера. Как это можно реализовать средствами js, пробовал атрибут «download», но картинка открывается в новой вкладке браузера. Подскажите пожалуйста решение.

Отслеживать
задан 2 июл 2019 в 9:39
45 9 9 бронзовых знаков

2 ответа 2

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

Я составил пример в котором:

1. открываю файл в новой вкладке браузера
2. скачиваю файл
3. вставляю содержимое файла в тело текущей страницы

Для примера использую картинку.

const request = new XMLHttpRequest(); // с помощью ajax запроса получаем картинку в виде бинарных даннных request.open('GET', 'https://ru.stackoverflow.com/content/Shared/balsamiq/wmd-mockup-button.png', true); // обязательный параметр, с помощью него в результате запроса мы получим Blob объект который содержит информацию о файле request.responseType = 'blob'; request.onload = () => < // в момент вызова этой функции в переменной request.response // будет javascript объект типа Blob // создаём ссылку на Blob-файл (не путать с base64!), по этой ссылке можно открыть или скачать файл // такая ссылка имеет особый вид `blob:https://ru.stackoverflow.com/a6fb157b-d130-4b7a-a372-e183a95292c1` const url = window.URL.createObjectURL(request.response); // открыть файл в новой вкладке window.open(url); // скачать файл const link = document.createElement('a'); // создаём ссылку link.href = url; link.setAttribute('download', 'test.png'); // чтобы при скачивании файл назывался как нам нужно - указываем явно имя в атрибут ссылки document.body.appendChild(link); // программно имитируем клик по ссылке чтобы браузер инициировал скачивание файла link.click(); // считать файл и вставить в тело страницы const reader = new FileReader(); reader.readAsDataURL(request.response); reader.onload = e =>< // таким образом делаем предпросмотр картинки const img = document.createElement('img'); img.src = e.target.result; document.body.appendChild(img); console.log('DataURL:', e.target.result); // выводим в консоль base64 строку из которой состоит файл >; >; request.send();

Для получения файла с помощью ajax вы так же можете использовать библиотеки axios или jquery .

Как сделать ссылку на изображение: простой пример html-кода

Картинки — не только часть дизайна сайтов. Это инструмент продвижения и дополнительный функционал на сайтах и мини-лендингах. Красивые кнопки, баннеры — это изображение со ссылкой, сделанное при помощи html.

Виды картинок на сайтах

· Кнопки

Это картинки, нарисованные в Photoshop. При помощи кодов они совершают какое-то действие (скачать, начать чат, записаться, купить) или направляют пользователя на другую страницу (посмотреть программу курса, войти в комнату вебинара, ).

· Иллюстрации, инфографика, таблицы, скриншоты, дополняющие текст.
· Баннеры

Рекламные коллажи, при нажатии происходит переход на другую страницу или новое окно браузера. Переход на страницу услуги, обучающего курса, товара.

Подложка под основными блоками сайта
· Слайдеры

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

Само по себе изображение не может совершить действия. Это картинка в формате .jpeg, .jpg, .png. Чтобы изображения работали, а не были просто украшением нужно сделать из них ссылку html.

Как сделать изображение ссылкой

Для добавления рисунка на HTML-страницу используется тег img от слова «image». Следующий код служит для отображения картинок, которые ни на что не ссылаются.

Чтобы изображение стало ссылкой нужно вставить тег img внутрь ссылки a.
Соедините вместе две строчки:

Расшифровка кода:

· src указывает адрес картинки
· href — адрес сайта, страницы, куда ведет линк.
· site.ru — замените на ваш домен
· site.ru/Link ­­— адрес страницы

Разместить изображение c Html

Если вы размещаете фотографии на сайте со своим движком, то они по умолчанию хранятся в определенной назначенной папке, обычно uploads или pictures.

Если вставить картинку строчкой , то оно будет отображено с оригинальным размером, без выравнивания, без тегов.

Ниже шаблон html-кода для аккуратного размещения картинки на странице:

Html-параметры изображений

Для отображения фотографий с помощью тега IMG используются атрибуты:
· Width — ширина
· height – высота

Оба параметра указывают в пикселах (px) или процентах. Значение =»100%» растянет изображение на всю ширину страницы.

· align – выравнивание: «right» по правому краю, «left» по левому, «center» по центру.
· border – указывает толщину рамки вокруг рисунка в px. Чтобы окантовки не было указывают border=0.

· hspace/vspace – отступ от окружающего контента. Чтобы текст не «наезжал» плотно на рисунок, по его периметру добавляют пустое пространство.

Пример html кода с атрибутами:

Тег изображений

Чтобы картинки помогали продвигать сайт, вписывают теги.

Alt – описание того, что изображено на фото. Если фото не загрузилось из-за низкой скорости интернета, человек увидит альтернативный текст. Прописанные теги любят поисковые роботы — заполняйте их.

Картинки на конструкторе

Если работаете с конструктором сайтов или простой CMS как WordPress, то дополнительные знания кодов не нужны — все делается в редакторе. Чтобы залить фото в статью блога, используют опцию загрузки изображений. В окне загрузки выбираете путь к картинке и публикуете ее. Дополнительно можно прописать теги Title и Alt, вписав ключевые слова. Они помогают продвигать сайт изображениями.

10 способов загрузить фотографию в интернет и получить ссылку

Сегодня практически невозможно представить себе сайт без фотографий. Чтобы ими легко обмениваться, просто необходимо под руками иметь удобный сервис для хранения изображений. Хотите узнать, есть ли хорошие ресурсы, созданные исключительно для бесплатного хостинга изображений? У нас приятная новость: такие ресурсы действительно существуют, и мы расскажем о них. Мы собрали лучшие из таких сервисов и представляем их вашему вниманию.

PostImage

PostImage — очень простой ресурс, позволяющий сохранять изображения с созданием учетной записи или без нее. При загрузке фотографии можете выбрать срок ее хранения: один день, семь дней, 31 день или вечно.

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

TinyPic

TinyPic от Photobucket создан для быстрой и простой загрузки фотографий и обмена ими. Для этого не обязательно проходить регистрацию. Просто выберите файл, который хотите сохранить. Добавьте теги, задайте нужный размер и дождитесь окончания загрузки.

TinyPic предоставляет вам прямую ссылку, чтобы делиться фотографией с другими людьми. Добавление тегов поможет людям, использующим функцию поиска изображений. Фотографии и видео, которые не связаны с учетной записью, остаются на сайте не менее 90 дней, затем удаляются, если за это время их не просматривали.

Максимальный размер картинок — 1600px в ширину и высоту, до 100 Мб. Доступна загрузка видеороликов продолжительностью до 5 минут.

Free Image Hosting

Free Image Hosting похож на Imgur, но с менее стильным интерфейсом и без удобных гиперссылок. Также следует отметить довольно внушительное количество рекламы на сайте. Если вы не возражаете против нее, загружайте фотографии и обменивайтесь ими даже без регистрации.

Изображения сохраняются на сайте навсегда. Это касается и анонимных пользователей. Доступна загрузка GIF-файлов. Некоторые из них могут выглядеть искаженными, если они слишком большие по размеру.

Плюсы:

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

Максимальный размер файла — 3000 Кб для фотографии.

ImageVenue

ImageVenue поддерживает загрузку фотографий в формате JPEG размером до 3 Мб. Также можно изменять размер больших фото во время загрузки. Качество картинки и соотношение сторон при этом сохраняются. Это удобный инструмент для тех, кто пользуется досками объявлений и социальными сетями. Сервис очень прост в использовании.

Imgur

Если вы уже знакомы с Reddit, то, вероятно, знаете, что Imgur — любимый бесплатный хостинг для социальных сетей этого сообщества. Вам даже не нужно создавать учетную запись, просто заходите на сайт и загружайте фотографии.

Фото с вашего компьютера могут быть загружены в Imgur для совместного использования в социальной сети. Для этого выдается уникальный URL-адрес со ссылкой на закачанные файлы. Если используете хостинг со смартфона или планшета, для удобства установите мобильное приложение Imgur.

Фотографии и GIF-анимация загружаются быстро и просто, без потери качества. Максимальный размер файла — 20 Мб для всех не анимированных картинок и 200 Мб для — анимированных.

Google Photos

Google Photos — один из самых полезных сервисов, главным образом за счет наличия функции автоматического резервного копирования. Поскольку у вас, вероятно, уже есть учетная запись Google, использование сервиса не должно вызвать затруднений.

Вы можете получить доступ к сервису на странице photos.google.com или просто загрузить бесплатное приложение Google Photos на телефон. Во втором случае появляется возможность автоматической загрузки всех фотографий на сервис, которые вы будете делать с помощью телефона. Все они синхронизируются через учетную запись, после чего их можно будет скачать уже на компьютер.

Google Photos также позволяет редактировать изображения, группировать их по разным параметрам, делиться ими с другими людьми (в том числе не имеющих аккаунта в Google Photos). Чем дольше вы используете этот сервис, тем больше он узнает о ваших предпочтениях, что позволяет автоматически группировать изображения так, как это удобней для вас.

Плюсы:

• автоматическое резервное копирование,
• загрузка большого количества материалов,
• сохранение фото в высоком разрешении,
• удобное редактирование, поиск и группирование фотоизображений.

Максимальный размер файла неограничен. Сервис позволяет сохранять фотографии, сделанные на камеры с разрешением до 16 Мп. Ограниченное пространство выделяется для кадров, сделанных камерами DSLR. Также доступна загрузка видео в формате 1080p HD.

Flickr

Flickr — один из старейших и популярных фотохостингов, работающих до сих пор. Он отлично подходит как для бесплатного хранения изображений, так и для их редактирования. Вы можете использовать инструменты для улучшения фотографий, прежде чем сгруппировать их в альбомы, чтобы затем делиться с другими участниками сообщества Flickr.

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

Официальное мобильное приложение Flickr — одно из главных преимуществ сервиса. Доступен также инструмент Flickr Uploader, создающий резервные копии фотоизображений с компьютера, Apple iPhoto, Dropbox и других мест.

Плюсы:

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

Чтобы другие люди могли скачивать ваши фото, обязательно опубликуйте их в соответствии с лицензией Creative Commons. Максимальный размер хранилища — 1000 Гб.

500px

Как и Flickr, 500px — популярная социальная сеть для фотографов, которые хотят поделиться своими лучшими снимками. Этот сервис не совсем похож на некоторые из рассмотренных выше. Здесь нет прямых ссылок на сохраненные фотографии, но это фантастический вариант для фотографов, желающих продемонстрировать свои работы и, возможно, даже немного заработать на них.

Те, кто выбрал 500px, могут создавать личный профиль для публикации своих фотографий. Премиум-пользователи получают возможность создать портфолио без комментариев и оценок пользователей сообщества. Если вы хотите отображать фотографию на веб-сайте, вставьте код со ссылкой на страницу с сохраненным файлом.

Плюсы:

• социальная сеть со большим сообществом фотографов,
• лицензирование изображений и возможность их продажи.

Поскольку 500px — скорее социальная сеть, чем фотохостинг, сервис не имеет никаких ограничений на размера загружаемого файла. Опытным путем удалось установить, что можно загружать даже очень большие изображения в формате JPEG. Для обладателей обычных профилей существует ограничение — до 20 загружаемых фотографий в неделю. Это ограничение снимается (а также предоставляются дополнительные возможности), если вы переходите в премиум-пользователи и ежегодно платите $25.

Dropbox

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

Dropbox также имеет мобильное приложение для загрузки, управления и совместного использования всех файлов со смартфона или планшета. Нажмите на стрелку возле файла, чтобы сделать его доступным для автономного просмотра. Это полезная функция, если нет доступа в интернет.

Плюсы:

• обмен отдельными фотографиями или целыми папками.

Максимальный размер хранилища — 2 Гб. Есть возможность получить дополнительный объем, приглашая других людей присоединиться к Dropbox или перейдя на платный тариф.

ImageShack

ImageShack имеет бесплатную 30-дневную пробную версию и премиум-аккаунт. Стоит отметить интересный интерфейс, напоминающий Pinterest. Вы можете использовать сервис для загрузки большого количества фотографий с высоким разрешением, создания альбомов, группировки фото с помощью тегов. Также есть функция поиска фотографий других пользователей.

Настройте параметры конфиденциальности, если не хотите, чтобы ваши фотографии были видны другим пользователям. ImageShack имеет несколько приложений для мобильных устройств. Можете воспользоваться этим ПО, чтобы упростить загрузку фотографий и обмен ими. Максимальный объем хранилища — 10 Гб в месяц для обычных пользователей.

Скачивание файлов из Интернета

Internet Explorer 11 был окончательно отключен с помощью обновления Microsoft Edge в некоторых версиях Windows 10. Если для любого сайта, который вы посещаете, требуется Internet Explorer 11, его можно перезагрузить в режиме Internet Explorer в Microsoft Edge. Рекомендуется перейти на Microsoft Edge , чтобы начать пользоваться более быстрым, безопасным и современным браузером.

Из Интернета можно скачивать несколько типов файлов: документы, изображения, видеозаписи, приложения, в том числе расширения и панели инструментов для браузера. Если выбрать файл для скачивания, Internet Explorer спросит, что нужно сделать с этим файлом. В зависимости от типа скачиваемого файла доступны следующие варианты:

• Открыть файл для просмотра, но не сохранять на компьютере.
• Сохранить файл на компьютере в стандартной папке для скачивания. После того как Internet Explorer проверит безопасность и завершит скачивание файла, вы сможете открыть файл, открыть папку, в которой он сохранен, либо просмотреть файл в диспетчере загрузок.
• Сохранить под другим именем, с другим типом или в другой папке на компьютере.
• Выполнить приложение, расширение или файл другого типа. После того как Internet Explorer выполнит проверку безопасности, файл откроется и запустится на компьютере.
• Отменить скачивание и вернуться к просмотру веб-страниц.

На компьютере можно также сохранять файлы меньшего размера, например отдельные картинки. Для этого щелкните объект правой кнопкой мыши изображение, ссылку или файл и выберите пункт Сохранить изображение или Сохранить объект как.

Поиск скачанных файлов на компьютере

Диспетчер загрузки отслеживает изображения, документы и другие файлы, скачиваемые из Интернета. Скачанные файлы автоматически сохраняются в папке Загрузки. Эта папка обычно находится на диске, где установлена ОС Windows (например, C:\Пользователи\имя_пользователя\Загрузки). Скачанные файлы можно перемещать из папки «Загрузки» в другие папки на компьютере.

Чтобы просмотреть файлы, загруженные с помощью Internet Explorer, откройте Internet Explorer, а затем нажать кнопку Инструменты и выбрать просмотреть загрузки. Вы сможете посмотреть, что вы скачали из Интернета, где эти элементы хранятся на вашем компьютере, и выбрать действия для скачивания.

Изменение стандартной папки для скачивания на компьютере

1. Откройте Internet Explorer, выберите кнопку Инструменты, а затем выберите Просмотреть загрузки.
2. В диалоговом окне Загрузки представления выберите Параметры в левом нижнем поле.
3. Выберите другое расположение для скачивания по умолчанию, на выбрав обзор и на выбрав ОК.

Почему некоторые файлы не открываются в Internet Explorer

Internet Explorer использует такие надстройки, как Adobe Reader, для просмотра некоторых файлов в браузере. Если файл, для которого требуется надстройка, не открывается, возможно, у вас есть более старая версия надстройки, которую необходимо обновить.

Скачивание и предупреждения системы безопасности

Во время скачивания файла Internet Explorer по ряду признаков проверяет, не представляет ли файл угрозу для компьютера. Если Internet Explorer определит скачанный файл как подозрительный, вы получите уведомление, чтобы решить, сохранять, запускать или открывать файл. Не все файлы, для которых выводится предупреждение, на самом деле опасны, но важно скачивать только действительно нужные файлы и только с надежных сайтов.

Если вы видите предупреждение системы безопасности о том, что издателю данной программы не удалось подтвердить проверку, это означает, что Internet Explorer не распознает сайт или организацию, запрашивающие скачивание файла. Перед сохранением или открытием такого файла убедитесь, что его издателю можно доверять.

Скачивание файлов из Интернета всегда сопряжено с риском. Вот некоторые меры предосторожности, которые можно предпринять для защиты компьютера при скачивании файлов:

• Установите и используйте антивирусную программу.
• Скачивайте файлы только с веб-сайтов, которым доверяете.
• Если файл имеет цифровую подпись, убедитесь, что она действительна и файл получен из надежного источника. Для просмотра цифровой подписи перейдите по ссылке издателя в диалоговом окне предупреждения о безопасности, которое отображается при первом скачивании файла.