Получите данные изображения в формате JSON и вставьте их в DOM

Question

Я упаковываю изображение в jSON и отправляю его клиенту .... На стороне клиента я хочу отобразить эти данные в виде изображения ...

Я не отправляю URL-адрес изображения через JSON ... Я пытаюсь отправить данные самого изображения

Данные изображения JSON, которые я получаю на клиенте, выглядят так:

PNG  Ûâ\IÂØ>ó4ã¯wcÏLÓQÆÝîHâèÖnò)©£M¡ÀÍ.j3µx¼ê#Ì{Þ±NÔÃïj$­©N¨eÃyßÆR$id'|ýpøcå{ãyY'àþ½b|äô¹¨:Óç}@ÖÀdõÉ­Ä

Answer 1

Это можно сделать с помощью URL-адресов данных во всех браузерах, кроме IE7 и ниже. Основной формат таков:

<img src="data:image/png;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7">

Подробнее об этом можно прочитать здесь: http://www.websiteoptimization.com/speed/tweak/inline-images/

Answer 2

Я не знаю, насколько элегантно ваше решение, но вы можете закодировать изображение как BASE64 и встроить его, используя:

<img src="data:image/png;base64,BASE64_ENCODED_DATA_HERE">

Также стоит отметить, что кодировка BASE64 увеличивает накладные расходы на ~ 33%. Вместо этого вы можете создать временный каталог на вашем сервере, где вы храните такие изображения и удаляете их после запроса?

Answer 3

Вы не можете отправлять двоичные данные в браузер внутри JSON.

Вы можете использовать кодировку b64 и DataURI ( MDC ) ( Wikipedia ) в браузере, который его понимает

Поскольку комментарии, которые пришли после моего поста, имеют реальный пример, вот один из Википедии:
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0 vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />

В качестве альтернативы можно преобразовать в SVG , который также является текстовым