Используя Ajax, получите Байтовое Изображение и покажите Изображение на клиентском сайте в ASP. Net MVC

Question

Я конвертирую изображение в байты, и теперь я хочу, чтобы byteImage отображал изображение в браузере, как я могу это сделать. У меня есть только две данные, одна - это Изображение ID , а другая - Имя_изображения и отображается в таблице, но я не могу отобразить Изображение в таблице

Модель:

   public class ImageFile
    {
        public int ID { get; set; }
        public string Image_Name { get; set; }
        public byte[] ImageInbyte { get; set; }
    }

Контроллер:

        public JsonResult GetAllImageList()
        {
            var allImage_List = _imageManager.GetAll();
            return Json(allImage_List, JsonRequestBehavior.AllowGet);
        }

Получить Json Данные запроса:

[{"ID":1,"Image_Name":"test","ImageInbyte":[255,216,255,224,0,16,74,70,73,70,0,1]}]

Вставить Json Данные в таблице:

$(document).ready(function () {
            $.getJSON("/SuperAdmin/Image/GetAllImageList",
                function (json) {
                    cache: false;
                    var tr;
                    //Append each row to html table
                    for (var i = 0; i < json.length; i++) {
                        var serialNum = i + 1; 
                        tr = $('<tr/>');
                        tr.append("<td>" + serialNum + "</td>"); 
                        tr.append("<td>" + json[i].ID + "</td>");
                        tr.append("<td>" + json[i].Image_Name + "</td>");
                        tr.append("<td>" + json[i].ImageInByte + "</td>");
                        $('#MydataTable').append(tr);
                        serialNum++; //increment serialNum 
                        $(document).ready(Datatable_show); //Call DataTable 
                    }
                });
        });

Answer 1

Хорошо, вы можете расстаться отсюда, это только пример переписывания кода для вашего собственного набора. Это НЕ ПОЛНОСТЬЮ ФУНКЦИОНАЛЬНАЯ идея.

string jsonReply = "{";

foreach (ImageFile image in allImage_List)
{
  Byte[] bytes = br.ReadBytes((Int32)image.Item3.Length); 
  string base64String = Convert.ToBase64String(bytes, 0, bytes.Length); 
  string imageBase64= "data:image/jpeg;base64," + base64String;

  jsonReply += "[\"id\": " + image.Item1 + ", \"name\": " + image.Item2 + "\"image\": 
           " + imageBase64 + "],";
}

jsonReply = jsonReply.TrimEnd(',');
jsonReply += "}";

return new JsonResult(jsonReply);

Чем вам нужно l oop в jQuery и использовать в соответствии с вашими целями. Еще раз напомню, что если у вас длинный список изображений, он будет страдать от значительных потерь производительности и длительного времени загрузки. Как правило, закодированные в base64 изображения могут go действительно длинные строки для передачи.

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

На этом этапе, возможно, вам следует придерживаться кодированных в base64 изображений и отправлять их в виде строк, считая узким местом для вашего приложения. .

Надеюсь, это поможет.

Приветствия

Answer 2

вот несколько идей, которые вы могли бы изучить.

1. Отправить одно изображение в браузер.

   return File (ImageInbyte, "image / jpeg", Image_Name + " _ "+ ID +" .jpeg ");

2. Преобразование байтового массива в файл и его отправка через поток памяти.

   с использованием (MemoryStream mStream = new MemoryStream (ImageInbyte) )) {return Image.FromStream (mStream); }

3. Преобразовать байтовый массив в файл и затем в кодированное в base64 изображение и отправить в браузер.

   Byte [] bytes = br.ReadBytes ((Int32) ImageInbyte.Length ); string base64String = Convert.ToBase64String (bytes, 0, bytes.Length); string imageUrl = "data: image / jpeg; base64," + base64String;

Надеюсь, это поможет вам решить вашу проблему.

Cheers