显示图像通过 Ajax 调用从 MVC 控制器返回为字节数组

Question

点击 HTML 表中的一行时，将对 MVC3 控制器进行 ajax 调用，该控制器返回一个带有图像字节数组的 json 对象，但视图中显示的是空图像。这应该适用于 IE 7 到 9

控制器代码为：

    [HttpPost]
    public ActionResult RenderImage(string code)
    {
        ImageVM viewmodel = GetImage(code)
        return Json(viewmodel.Chart, "image/png");
     }

引发ajax调用并显示图像的javascript代码是

  $(document).ready(function () {
      $('#Table tr').click(function (event) { 
      var id= $(this).attr('id')
         $.post("/Gateway/RenderImage", { "code": id },
     function (data) {
                alert(data);
            $('#ChartDiv').html('<img height="200" width="250" src="data:image/png;base64,' + data + '" />');

            });
       });
  });

Answer 1

我稍微更改了您的代码，这对我有用 :)

 [HttpPost]
        public virtual JsonResult RenderImage(string code)
        {
//for test data Im using the below, you can use yours :   GetImage(code)        
var data =   
  @"iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC";
            return Json(data);
        }

在 Javascript 中（去掉一个反斜杠）

 $('#Table tr').click(function (event) {
        var id = $(this).attr('id')
        $.post("Gateway/RenderImage", { "code": id },
    function (data) {
        alert(data);
        $('#ChartDiv').html('<img height="200" width="250" src="data:image/png;base64,' + data + '" />');

    });
    });

[编辑] 为了使上述代码与 png 文件一起使用，我们可以将控制器操作更改为以下内容：

[HttpPost]
public virtual JsonResult RenderImage(string code)
{
    var filePath = "~/Images/PngExampleImag.png";
    var ImageBytes = System.IO.File.ReadAllBytes(Server.MapPath(filePath));
    var data = Convert.ToBase64String(ImageBytes);
    return Json(data);
}