Принудительная загрузка изображения с помощью Javascript

Я хочу знать, есть ли способ сделать скрипт с помощью Javascript/jQuery для загрузки (открытия диалога загрузки) изображения, чтобы браузер не просто показывал его.

16
file-io force-download javascript jquery

5 ответов

для этого необходимо использовать серверные скрипты. поиск по stackoverflow.

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

решение Apache с mod_headers

поместите загружаемые изображения в каталог. Внутри этого каталога создайте .htaccess файл со следующим содержимым:

SetEnvIf Request_URI "([^/]+\.jpg)$" REQUESTED_IMAGE_BASENAME=
SetEnvIf Request_URI "([^/]+\.png)$" REQUESTED_IMAGE_BASENAME=
Header set Content-Disposition "attachment; filename=\"%{REQUESTED_IMAGE_BASENAME}e\"" env=REQUESTED_IMAGE_BASENAME

Тестовый Запрос:

HEAD /test/Water%20lilies.jpg HTTP/1.1
Host: localhost
35

Я придумал чистый JavaScript способ принудительной загрузки изображения со следующими ограничениями:

  1. использование HTML5, поэтому не работает вообще в браузерах IE до IE9.
  2. в IE (даже 9) ограничено очень маленькими изображениями из-за ограничения длины URL.
  3. имя изображения (при сохранении на компьютере) не может быть определено в коде, в Chrome это будет просто "загрузка" без расширения, а в Firefox это будет то, что выглядит как строка jibberish с ".часть " расширение-в любом случае, пользователь должен будет переименовать файл, чтобы сделать его пригодным для использования.
  4. можно загружать только изображения в том же домене-та же политика происхождения.

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

здесь код:

function DownloadImage(imageURL) {
    var oImage = document.getElementById(imageURL);
    var canvas = document.createElement("canvas");
    document.body.appendChild(canvas);
    if (typeof canvas.getContext == "undefined" || !canvas.getContext) {
        alert("browser does not support this action, sorry");
        return false;
    }

    try {
        var context = canvas.getContext("2d");
        var width = oImage.width;
        var height = oImage.height;
        canvas.width = width;
        canvas.height = height;
        canvas.style.width = width + "px";
        canvas.style.height = height + "px";
        context.drawImage(oImage, 0, 0, width, height);
        var rawImageData = canvas.toDataURL("image/png;base64");
        rawImageData = rawImageData.replace("image/png", "image/octet-stream");
        document.location.href = rawImageData;
        document.body.removeChild(canvas);
    }
    catch (err) {
        document.body.removeChild(canvas);
        alert("Sorry, can't download");
    }

    return true;
}

Как видите, трюк нанесения изображения на canvas объект, получить исходные двоичные данные изображения, а затем принудительно загрузить с помощью image/octet-stream тип MIME и изменение местоположения браузера.

пример использования следует также.

HTML-код:

<image id="myimage" src="Penguins.jpg" />
<button type="btnDownload" rel="myimage">Download</button>

JavaScript:

window.onload = function() {
    var arrButtons = document.getElementsByTagName("button");
    for (var i = 0; i < arrButtons.length; i++) {
        var oButton = arrButtons[i];
        var sRelatedImage = oButton.getAttribute("rel");
        if (sRelatedImage && sRelatedImage.length > 0) {
            oButton.onclick = function() {
                HandleRelatedImage(this, sRelatedImage);
            }
        }
    }
};

function HandleRelatedImage(oButton, sRelatedImage) {
    var oImage = document.getElementById(sRelatedImage);
    if (!oImage) {
        alert("related image '" + sRelatedImage + "' does not exist");
        return false;
    }

    return DownloadImage(sRelatedImage);
}

это позволяет" прикрепить " кнопку загрузки к каждому существующему изображению, назначив rel атрибут кнопки к идентификатору изображения-код сделает все остальное и прикрепит фактические события click.

из - за той же политики происхождения не может опубликовать живой пример в jsFiddle-они используют домен "песочницы" для выполнения сценариев.

13

вот простое решение, которое использует атрибут HTML5 'download':

document.getElementById('download').click();
<a id="download" href="https://docs.google.com/uc?id=0B0jH18Lft7ypSmRjdWg1c082Y2M" download hidden></a>
Если он может найти изображение, оно загрузит изображение кошки.
4

это вполне возможно. Просто Закодируйте изображение как Base64, а затем сделайте window.open с data:image/jpg,Base64,...-стиль URL-адрес.

1

Я предполагаю, что вы имеете в виду что-то вроде этого:

перейти к url в браузере, URL:http://example.com/image.png

и вместо отображения, браузер предложит вам сохранить изображение?

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

EDIT: я, кажется, помню, что заголовок Content-Disposition: attachment;

0