@Mark321

Base64 формат картинки, что делать на фронтенде?

Добрый день, подскажите пожалуйста, приходит джсон сервера, картинка зашифрована в формате base64(50 тысяч символов и вес 470 кб показывает в консоли)
При вставке картинки в тег имг, картинка отображается, но т.к я с этим никогда не сталкивался, мне кажется, что эту картинку как-то надо обрабатывать на фронтенде? декодировать? или это нормально
  • Вопрос задан
  • 94 просмотра
Решения вопроса 1
MrDecoy
@MrDecoy Куратор тега JavaScript
Верставший фронтендер
что делать на фронтенде

Пойти к бэкендеру и сказать: ты шо, дурак, зачем нам 470киллобайт не кешируемых данных по сети каждый раз гонять?!
И пинать чтоб присылал ссылку.
(а на деле я так понимаю там не одна картинка такая и не кешируемых данных в разы больше гоняется, что вообще ужас)

На серьёзном хайлоад проекте это была бы, условно, смерть серверам по трафику.
Но клиенты с не самым хорошим интернетом отлетели бы ещё раньше. А не самый хороший это даже мобильный 4g в средних условиях приёма сигнала. 470кб это очень, очень много для всего лишь одного запроса. Тяжелее запрос - дольше время до отрисовки.
Ну и мобильный интернет далеко не у всех безлимитный. А не в России и подавно.

А ещё есть лимиты на длину строки. В разных движках причём разные. Так что, теоритически, наверное, можно упереться в лимит строки и картинка не отобразится или будет битая.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@zkrvndm Куратор тега JavaScript
Софт для автоматизации
Обрабатывать такую картинку не обязательно, но если есть такое желание, можно его конвертировать в Blob и получить на него ссылку и уже эту ссылку вставить в атрибут src у картинки:
(async function() {
    
    var base64 = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjQ1OXB4IiBoZWlnaHQ9IjQ1OXB4IiB2aWV3Qm94PSIwIDAgNDU5IDQ1OSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDU5IDQ1OTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGcgaWQ9InNoYXJlIj4NCgkJPHBhdGggZD0iTTQ1OSwyMTYuNzVMMjgwLjUsMzguMjV2MTAyYy0xNzguNSwyNS41LTI1NSwxNTMtMjgwLjUsMjgwLjVDNjMuNzUsMzMxLjUsMTUzLDI5MC43LDI4MC41LDI5MC43djEwNC41NUw0NTksMjE2Ljc1eiIvPg0KCTwvZz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjwvc3ZnPg0K';
    var blob = await (await fetch(base64)).blob();
    var url = URL.createObjectURL(blob);
    
    document.querySelector('img').src = url; // Заменить селектор на свой
    
})();

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы