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

Question

当点击在HTML表中的行，所述AJAX调用到MVC3控制器返回与所述图像的一个字节数组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); 
}