Принудительная загрузка изображения из base64 в браузере

Быстрый ответ

Чтобы загрузить изображение, закодированное в формате base64, непосредственно из браузера, можно использовать тег <a> с атрибутом download. В href следует указать данные изображения, а в атрибуте download – имя сохраняемого файла. Вот пример такого кода:

<a href="data:image/jpeg;base64,...здесь данные в формате base64..." download="имя-файла.jpg">Скачать изображение</a>

После клика по ссылке начнётся загрузка изображения с указанным именем файла.

Учёт особенностей различных браузеров

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

Blob: Решение для старых браузеров

Если вам приходится поддерживать устаревшие браузеры или работать с большим объемом данных, можно преобразовать URI данных в Blob. Это обеспечит стабильное функционирование и совместимость с различными платформами. Пример преобразования данных:

function dataURItoBlob(dataURI) {
    var byteString = atob(dataURI.split(',')[1]);
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    var blob = new Blob([ab], {type: 'image/jpeg'});
    return blob;
}

var blob = dataURItoBlob('data:image/jpeg;base64,...');
var url = URL.createObjectURL(blob);

var a = document.createElement('a');
a.href = url;
a.download = 'название-файла.jpg';
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);

Данный код позволяет надёжно загрузить изображение в разных окружениях.

Подробнее об этом расскажет наш спикер на видео

Использование Javascript: Улучшение пользовательского интерфейса

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

window.open(url);

Чтобы изменить текущий URL страницы, воспользуйтесь следующим кодом:

window.location.href = url;

Такие приёмы помогают сделать процесс загрузки понятнее и удобнее для пользователя.

Визуализация

Графическое представление информации помогает легче понять происходящий процесс:

Браузер(🌥️): Это то, что видит пользователь.
Изображение(🪁): Данные, представленные в формате base64.
Ссылка(🧵): Связывает изображение с пользователем.
Клик(🤲): Разрешает начать загрузку.

Для загрузки изображения, закодированного в формате base64, можно использовать такой код:

<a href="data:image/jpeg;base64,..." download="myphoto.jpg">
    Кликните здесь, чтобы загрузить изображение!
</a>

Расширение возможностей атрибута download

Если нужно реализовать загрузку динамически создаваемого контента или позволить пользователю скачивать данные без его активного участия, просто использовать тег <a> недостаточно. В такой ситуации приходится прибегать к помощи Javascript для динамического управления загрузкой.

JavaScript: Модификация изображения перед загрузкой

Если требуется передать данные изображения, которые не представлены в формате URI, их можно сначала отобразить на холсте <canvas>, а затем сформировать данные в требуемом формате.

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function(){
    ctx.drawImage(img, 0, 0);
    var dataURI = canvas.toDataURL('image/jpeg');
    var blob = dataURItoBlob(dataURI);
    // Далее продолжаем с созданием URL и запуском загрузки...
};
img.src = 'путь/к/файлу.jpg';

Библиотека для упрощения работы: FileSaver.js

Библиотека FileSaver.js идеально подходит для простых и универсальных решений, совместимых с большинством браузеров.

saveAs(blob, "название-файла.jpg"); // Легко и просто сохранить файл

Этого достаточно, чтобы сохранить файл!

Полезные ссылки