Браузер / HTML Принудительная загрузка изображения из src = «data: image / jpeg; base64…»

Я генерирую изображение на стороне клиента и отображаю его с помощью HTML следующим образом:

<code><img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgM...."/>
</code>

Я хочу предложить возможность скачать сгенерированное изображение.

Как я могу понять, что браузер открывает диалог сохранения файла (или просто загружает изображение, как это делает chrome или firefox в папку загрузки), который позволяет пользователю сохранить изображениеwithout doing right click and save as на изображении?

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

Большое спасибо!

Ответы на вопрос(4)

Вы можете использовать атрибут загрузки тега ...

<a href="data:image/jpeg;base64,/9j/4AAQSkZ..." download="filename.jpg"></a>

узнать больше:https: //developer.mozilla.org/en/HTML/element/a#attr-downloa

 Mikhail17 апр. 2014 г., 14:31
Как я могу использовать это решение при динамическом создании источника изображения? Я имею в виду, что у меня есть кнопка Скачать, когда пользователь нажимает на нее, я делаю некоторые вычисления, генерирую изображение base64 и ... как я могу принудительно загрузить?
 TheCarver03 мар. 2015 г., 02:25
На момент написания этого комментария,download атрибут по-прежнему не поддерживается Safari и IE.
 cmaduro17 июл. 2014 г., 18:53
В Chrome я не могу установить имя файла, используя этот метод. Имя загруженного файла остается «скачать», несмотря ни на что. Это происходит только при использовании данных: изображение ...
 Kokizzu09 янв. 2014 г., 05:04
это самое простое решение ..
 Mirko Lugano26 нояб. 2014 г., 13:09
Я знаю, что это старый пост, но, согласно веб-сайту W3Schools, атрибут «download» не поддерживается IE, Safari и Opera v. <12 W3schools.com / теги / tryit.asp? Имя_файл = tryhtml5_a_download2 на самом деле я пытался с IE, и он не работает ....:

Думаю, IMGег @ нужен как ребенок отa тег, следующим образом:

<a download="YourFileName.jpeg" href="data:image/jpeg;base64,iVBO...CYII=">
    <img src="data:image/jpeg;base64,iVBO...CYII="></img>
</a>

ил

<a download="YourFileName.jpeg" href="/path/to/OtherFile.jpg">
    <img src="/path/to/OtherFile.jpg"></img>
</a>

Только с помощьюaег @, как описано в # 15, не работал для меня с последними версиями Firefox и Chrome, но помещал одни и те же данные изображения в оба A.href а также Img.src теги работали на меня.

Из JavaScript это можно сгенерировать так:

var data = canvas.toDataURL("image/jpeg");

var img = document.createElement('img');
img.src = data;

var a = document.createElement('a');
a.setAttribute("download", "YourFileName.jpeg");
a.setAttribute("href", data);
a.appendChild(img);

var w = open();
w.document.title = 'Export Image';
w.document.body.innerHTML = 'Left-click on the image to save it.';
w.document.body.appendChild(a);
 Dimitar Christoff16 июн. 2017 г., 16:56
это не значит, что ему нужен тег img внутри, документ MSDN заявляет, что могут использоваться только уже загруженные ресурсы - он должен работать, пока у вас есть изображение с теми же данными: base64 где угодно. Msdn.microsoft.com / EN-US / библиотека / cc848897.aspx - «Из соображений безопасности URI данных ограничены загружаемыми ресурсами. URI данных нельзя использовать для навигации, создания сценариев или для заполнения элементов фрейма или фрейма.»
Решение Вопроса

image/jpeg сapplication/octet-stream. Клиент не распознает URL-адрес как встроенный ресурс и не выведет диалоговое окно загрузки.

Простое решение JavaScript будет:

//var img = reference to image
var url = img.src.replace(/^data:image\/[^;]+/, 'data:application/octet-stream');
window.open(url);
// Or perhaps: location.href = url;
// Or even setting the location of an <iframe> element, 

Другой способ - использоватьblob: URI:

var img = document.images[0];
img.onclick = function() {
    // atob to base64_decode the data-URI
    var image_data = atob(img.src.split(',')[1]);
    // Use typed arrays to convert the binary data to a Blob
    var arraybuffer = new ArrayBuffer(image_data.length);
    var view = new Uint8Array(arraybuffer);
    for (var i=0; i<image_data.length; i++) {
        view[i] = image_data.charCodeAt(i) & 0xff;
    }
    try {
        // This is the recommended method:
        var blob = new Blob([arraybuffer], {type: 'application/octet-stream'});
    } catch (e) {
        // The BlobBuilder API has been deprecated in favour of Blob, but older
        // browsers don't know about the Blob constructor
        // IE10 also supports BlobBuilder, but since the `Blob` constructor
        //  also works, there's no need to add `MSBlobBuilder`.
        var bb = new (window.WebKitBlobBuilder || window.MozBlobBuilder);
        bb.append(arraybuffer);
        var blob = bb.getBlob('application/octet-stream'); // <-- Here's the Blob
    }

    // Use the URL object to create a temporary URL
    var url = (window.webkitURL || window.URL).createObjectURL(blob);
    location.href = url; // <-- Download!
};
Соответствующая документацияatob Типовые массивыURL.createObjectURLBlob а такжеBlobBuilder
 alex06 мая 2012 г., 23:01
По какой-то причине в Chrome 19.0 beta он не работает, но работает на Chrome 18 и Firefox, так что я в порядке. Есть ли возможность задать имя файла?
 alex07 мая 2012 г., 08:09
Как вы думаете, первый метод будет устаревшим, потому что он больше не работает в Chrome 19?
 Rob W06 мая 2012 г., 23:27
Нет способа установить имя файла в data-URI. Даже когда Холст / Blob используется для экспорта данных, имя файла не может быть установлено. Я добавил еще один метод в свой ответ (думаю, этот будет работать в Chrome 19).
 Rob W07 мая 2012 г., 10:02
Я не могу найти соответствующий источник на нем. Я также нашел этот ответ, кстати, который предлагает, как установить имя по умолчанию в Chrome (только якоря, пользователь должен нажать на него)
 xgqfrms04 июн. 2017 г., 15:34
это хорошее решение!

FileSaver.js. Это обеспечивает удобныйsaveAs функция, которая заботится о большинстве специфических особенностей браузера.

Ваш ответ на вопрос