Display image returned as byte array from MVC Controller through Ajax call

Question

When a row in the HTML table is clicked , the ajax call is made to the MVC3 Controller that returns a json object with a byte array of the image , but Empty image getting displayed in the view. This should work from IE 7 TO 9

The controller code is :

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

The javascript code for raising the ajax call and display the image is

  $(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 + '" />');

            });
       });
  });

Ali Al-Mosawi · Accepted Answer · 2012-08-04 09:14:57Z

1

I changed your code a bit and this is working with me :)

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

and in the Javascript (removed one backslash)

 $('#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 + '" />');

    });
    });

[Edit] to make the above code work with a png file we can change the controller action to the below:

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

edited Aug 4, 2012 at 9:14

answered Aug 2, 2012 at 10:39

Ali Al-Mosawi

7786 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user1570697 Over a year ago

I tried to return png byte array using this code from the RenderImage Action "return Json(System.IO.File.ReadAllBytes(errorFilePath))" and still it is not able to display the image in the view

Ali Al-Mosawi Over a year ago

@user1570697 I edited the answer and added a small modification to the action to make it return the png image file, I tested it and its working with my app. hope this helps.

user1570697 Over a year ago

I tried the controller code with a sample image var filePath = "~/Images/Error.png"; var ImageBytes = System.IO.File.ReadAllBytes(Server.MapPath(filePath)); var base64data = Convert.ToBase64String(ImageBytes); return Json(base64data); still the image is not getting updated , eventhough the data is coming to the ajax call back, may be the this is not working properly $('#ChartDiv').html('<img class="iamge" height="400" width="450" src="data:image/png;base64,' + data + '" />'); I use IE 9

user1570697 Over a year ago

I get the whole DIV data through a ajax call , is that because of that it is not setting the image for $('#ChartDiv').html('<img class="iamge" height="400" width="450" src="data:image/png;base64,' + data + '" />'); ?

Collectives™ on Stack Overflow

Display image returned as byte array from MVC Controller through Ajax call

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related