Отображение данных BLOB-объектов, полученных из базы данных MySQL с использованием JavaScript

Question

Используя веб-сервис, я смог получить некоторые данные из базы данных MySQL. В базе данных сохранено изображение с типом файла BLOB. Вот что возвращает мой веб-сервис, когда дело доходит до изображения:

<image>
/9j/4AAQSkZJRgABAQEAYABgAAD/7TaeUGhvd.....RRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQB//Z
</image>

Теперь у меня проблемы с тем, чтобы приложение JavaScript преобразовало эти данные и затем отобразило их в виде изображения. Я немного изучил его и нашел несколько учебных пособий в Интернете, но почему-то они не помогли мне ... Может кто-нибудь помочь мне с этим вопросом? Как проще всего преобразовать данные BLOB в изображение? Заранее спасибо!

Answer 1

Предполагая, что большой двоичный объект имеет PNG-данные, закодированные в base64, вы можете использовать data-uri , чтобы установить данные непосредственно для изображения, например

var imgdata = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="

$('#myimg').attr('src', "data:image/png;base64,"+imgdata)

Предполагается, что данные, возвращаемые с сервера, являются base64.закодированы, но если это не так, вы можете увидеть различные варианты, но в конечном итоге вам, возможно, придется сделать правильное преобразование на стороне сервера, в таком случае, почему бы просто не вернуть URL-адрес изображения и создать API на стороне сервера для возврата изображений из BLOB-объектов

Вот jsfiddle в действии http://jsfiddle.net/anuraguniyal/4DEtH/5/

Редактировать: Я не уверен, какой язык вы используете на стороне сервера, но процесс будет одинаковым для каждого языка, например

>>> s='\x89PNG\r\n\x1a\n\x00\x00\x00\rIHDR\x00\x00\x00\x05\x00\x00\x00\x05\x08\x06\x00\x00\x00\x8do&\xe5\x00\x00\x00\x1cIDAT\x08\xd7c\xf8\xff\xff?\xc3\x7f\x06 \x05\xc3 \x12\x84\xd01\xf1\x82X\xcd\x04\x00\x0e\xf55\xcb\xd1\x8e\x0e\x1f\x00\x00\x00\x00IEND\xaeB`\x82'
>>> import base64
>>> base64.b64encode(s)
'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='

т.е. взять все данные, которые будут храниться в файле (не только маркер png), а не только необработанные данные изображения, и закодировать их