在 ASP.Net MVC 中使用 Ajax 获取字节图像并在客户端站点上显示图像

Posted 2023-04-13

【中文标题】在 ASP.Net MVC 中使用 Ajax 获取字节图像并在客户端站点上显示图像

【英文标题】：Using Ajax get Byte Image and show Image on client site in ASP.Net MVC

【发布时间】：2020-07-21 13:13:04

【问题描述】：

我将图像转换为字节，现在我想用字节图像在浏览器中显示图像，我该怎么做。我只有两个数据，一个是图像 ID，另一个是 Image_name 并显示在表格中，但我无法在表格中显示图像

型号：

   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 
                    
                );
        );

【参考方案1】：

这里有几个你可以探索的想法。

将单个图像发送到浏览器。

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

将字节数组转换为文件并通过内存流发送。

使用 (MemoryStream mStream = new MemoryStream(ImageInbyte)) 返回 Image.FromStream(mStream);

将字节数组转换为文件，然后转换为base64编码的图像并发送到浏览器。

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

我希望这可以指导您解决问题。

干杯

【讨论】：

@Bukovich Json 从控制器返回所有图像列表以及如何在客户端转换 ImageInbyte。能不能详细分享一下。谢谢

您无法将客户端的字节数组转换为图像，您需要将其作为服务器上的相对文件路径发送，并让 Web 服务器“完成工作”将文件发送到 Web 浏览器或者您需要将图像转换为 base64 编码的字符串图像。请注意，如果您的图像列表非常长，则通过 base64 编码字符串发送所有图像可能需要很长时间。

根据您的问题，我可以假设您将所有图像都存储到某种数据库中，对吗？

你想走哪条路？

任何方式，我只是在客户端查看图像列表，此代码返回 JSON 结果。

【参考方案2】：

好的，您可以离开这里，这只是为您自己的套件重写的示例代码。这不是完全功能只是一个想法。

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);

您需要在 jQuery 中循环并根据您的目的使用它。我再次提醒您，如果您的图像列表很长，它将遭受严重的性能损失和较长的加载时间。一般来说，base64 编码的图像可以用很长的字符串进行传输。

我自然更喜欢从数据库存储中删除图像并将它们作为物理文件保存在硬盘上，并将图像路径和文件名存储到数据库中。但这完全是另一回事，需要更改图像存储的应用程序逻辑。

在这个阶段也许你应该坚持使用 base64 编码的图像并将它们作为字符串发送，考虑到你的应用程序的瓶颈。

希望对你有帮助。

干杯

【讨论】：

Post Scriptum：我忘了告诉你关于你可能遇到的特殊符号的 base64 js 转义。只需在 javascript 中添加附加方法即可对 base64 字符串进行编码。 HttpUtility.JavaScriptStringEncode