Подтвердить что ты не робот

Получать данные изображения как JSON и вводить его в DOM

Я упаковываю изображение в 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õÉ­Ä
4b9b3361

Ответ 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/

Ответ 2

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

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

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

Ответ 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, который также является текстовым