ArrayBuffer или как создать буфер из Base64 строки?

Question

[Юра Комаров]

Здравствуйте знатоки рунета.
Я читаю документацию https://developer.mozilla.org/ru/docs/Web/JavaScri...
и не могу понять, как применить на практике "Создание буфера Из Base64 строки"
Я так понял, что можно строку base64 закинуть в буфер и получить на нее ссылку и прикрутить ее к картинке ( что бы не писать все строку base64 в картинку ). Основание предположения из статьи "Он представляет собой ссылку на поток "сырых" двоичных данных, однако работать с ними напрямую возможности не дает".
Для чего мне это нужно:
а) У меня на странице 70 одинаковых картинок.
б) Мне нужно сохранить эту картинку в localStorage, а после зачитать ее и опять прикрутить к 70 картинкам.
Что я делаю:
а) Получаю файл от пользователя const file = e.target.files[0];
б) Читаю его, как reader.readAsDataURL(file); (для того что бы можно было сохранить в localStorage)
в) Записываю данные в каждую картинку
Мои вопросы:
а) Как можно сохранить эту base64 в буфер согласно этой статье и добавить к картинкам только ссылку на этот буфер.
б) И можно ли так сделать, может я не так что понял.
в) И если можно, то можно простенький пример кода

Comments

[Lynn «Кофеман»]

А при чём тут нода?

Answer 1

[Larisa Moroz]

function base64ToArrayBuffer(base64) {
    var binary_string =  window.atob(base64);
    var len = binary_string.length;
    var bytes = new Uint8Array( len );
    for (var i = 0; i < len; i++)        {
        bytes[i] = binary_string.charCodeAt(i);
    }
    return bytes.buffer;
}

Рабочий пример с извлечением сохранённой картинки из localStorage в src семидесяти картинок: https://codepen.io/lmoroz/pen/yoNxRE?editors=0010
Но надо тестировать, что будет быстрее и менее затратно по памяти — просто записать data:base64 из localStorage во все src или маяться преобразованием в буфер