Визуализация байта [] для изображения с помощью jQuery

Question

Я сейчас читаю изображение из базы данных SQL Server как байт [].Я хотел бы передать изображение в виде байта [] или реального изображения в jQuery и динамически загрузить его.

Как и как лучше всего это сделать?

Спасибо вавансовый.:)

Редактировать: Вот решение:

1. На стороне сервера / C #: string json = JsonConvert.SerializeObject(employee);
2. На стороне клиента / Ajax:$('#image').attr('src', "data:image/jpg;base64,"+employee.Image);

Answer 1

Верните байт [] с веб-сервера с правильным набором типов контента, чтобы вы могли установить его в качестве источника тега изображения. Должно быть самое простое решение.

Answer 2

Если вы должны сделать это таким образом, вы можете вставить данные изображения непосредственно в атрибут src, используя следующий синтаксис:

data:image/<type>;base64,<data>

Замените типом изображения (jpg, png, gif) и вашимданные, закодированные в базе 64.

Однако, как говорит дециклон, лучший способ сделать это - создать отдельную страницу, которая выводит только данные вашего изображения и отправляет соответствующий заголовок типа контента.Затем установите для изображения src указатель на эту страницу.

Answer 3

Я не думаю, что использование jQuery является правильным решением.Это вещь на стороне клиента.JavaScript, если быть точным.

Обычно вы создаете страницу, которая записывает все эти байты в массив, используя Response.Write() и устанавливая тип контента в jpeg, bmp и т. Д., В зависимости от типа изображения.

Answer 4

Я сейчас читаю изображение из ответа JSON.Я хотел бы передать эту зашифрованную строку в элемент управления изображением на шаблоне Jquery и загрузить ее динамически. Как и как лучше всего это сделать?Шаблон выглядит следующим образом:

<script id="ImageDiv" type="image/png">
    <div style="width:200px;height:150px;>
            <img src="${ImageView}" alt="" />
        </div>
</script>

Файл Js выглядит следующим образом:

var demo = new Object();

$.each(msg.images, function (key, value) 
            {
                if (this.IsImage)
                 {
                    demo["ImageView"]="data:image/png;base64,"+this.Image;
                    $('#ImageDiv').tmpl(demo).appendTo("#Demo-Image");

                 }
            });

JSON Ответ следующий:

msg = {"Images":[ "Description": "Image1", "Image": "encoded string of image", "IsImage": true, "MimeType": "image/png", } ]

меньше места для копированиязакодированная строка изображения.