Как создать ссылку для загрузки изображения в HTML для мобильной страницы?

У меня есть мобильная страница html, содержащая изображения. Я хочу создать кнопку или ссылку, которая используется для загрузки изображения. Затем изображение должно быть сохранено в галерее мобильных галерей пользователей.

Я видел это сообщение: Как создать ссылку для скачивания в html?

Решение

<a href="link/to/your/download/file" download="filename">Download link</a>

работает в настольных браузерах, но не на мобильных устройствах.

Вот JSFiddle, который я сделал: http://jsfiddle.net/tDVqH/4/

Примечание. Изображение создается в браузере, то есть в элементе холста HTML5. Это изображение может быть сгенерировано с помощью canvas.toDataUrl(). Полученное изображение должно быть сохранено в галерее мобильных изображений.

Как сохранить изображение в галерее мобильных галерей пользователей с помощью щелчка/нажатия? Есть ли решение JavaScript без отправки в оба конца с неизвестным заголовком?

Изменить: я также нашел следующие вопросы, но у них нет ответа. Сохраните изображение в локальной папке с веб-сайта, нажав ссылку или кнопку в мобильном браузере и Сохраните изображение на мобильный телефона из браузера

Ответ 1

Кто-то, кажется, ответил на это уже,

<a href="/path/to/image" download="ImageName" title="ImageName">
    <img src="/path/to/image" alt="ImageName">
</a> It not yet fully supported http://caniuse.com/#feat=download, but you can use with modernizr
http://modernizr.com/download/#-a_download (в разделе "Неосновные обнаружения" ) поддержка всех браузеров.

Не тестировали, но должны работать и на мобильных телефонах.

Я бы добавил, что в качестве решения на стороне сервера вы также можете добавить заголовки ответов в конечную точку загрузки

Настройка его в конфигурации apache (.htaccess)/nginx
Прямо с кода

Ответ 2

Используйте атрибут загрузки html5 в качестве решения выше для @theunexpected1. Для браузеров, которые его не поддерживают, удалите тег A, чтобы заставить пользователя щелкнуть правой кнопкой мыши или долго касаться, чтобы загрузить

<script>
var downloadAttrSupported = ("download" in document.createElement("a"))
if (!downloadAttrSupported){
   $('img.media').unwrap();
}
</script>

Ответ 3

Поддержка атрибута загрузки: http://caniuse.com/download

Вы можете установить заголовки на сервере, если это опция для вас. HTTP-заголовком, который вы хотите отправить, является Content-Disposition: attachment; имя файла = "imagename.jpg".

Отличается в зависимости от вашего сервера.

В Node/Экспресс:

// only on imgs
function(req, res){
    res.setHeader('Content-disposition', 'attachment; filename=imagename.jpg');
}

В HTML:

<a href="imagename.jpg">Download link</a>

Сервер отправит заголовок Content-Disposition, когда он получит запрос на файл и принудительно загрузит браузеры.

Ответ 4

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

Здесь было сказано:

Принудительно загрузить файл или изображение с помощью .htaccess

Я не тестировал, поэтому не знаю, будет ли он работать с мобильными браузерами.