Load Jpeg image from MVC Controller via Javascript

Question

I have the below Controller action

  [HttpGet]
  public ActionResult Image()
  {

     FileContentResult result;

     var bmp = SomeBitmap;

     using (var memStream = new System.IO.MemoryStream())
     {
        bmp.Save(memStream, System.Drawing.Imaging.ImageFormat.Jpeg);
        result = File(memStream.GetBuffer(), "image/jpeg");
     }
     return result;
  }

I have the following ajax call

function getImage() {
    $.ajax({
        url: '@Url.Action("Image", "Recordings")',
        type: 'GET',
        dataType: 'image/jpg',
        cache: false,
        success: function (data) {
            Alert('never gets here');
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("Status: " + textStatus); alert("Error: " + errorThrown);
        }
    });
}

Issue

Error returns parseError and 'No conversion from text to image/jpg'

Am i missing something here??

score 0 · Accepted Answer · answered Nov 13 '14 at 05:53

0

I create a similar call in MVC. I think using ToArray() on the memory stream will solve your issue. I looked up the MSDN documentation and in the remarks section, it indicate that GetBuffer() will return to you extra unused bytes in the buffer. ToArray() will only return you the data that was actually written to in the buffer. Here is the MSDN link http://msdn.microsoft.com/en-us/library/system.io.memorystream.getbuffer%28v=vs.110%29.aspx

answered Nov 13 '14 at 05:53

stn9000

26
3

result = File(memStream.ToArray(), "image/jpeg"); has the same results unfortunatly – TheGeneral Nov 13 '14 at 05:59
I wonder if the ajax call is reaching your controller method. Your controller method is near identical to mine with the ToArray() method in use (I used a png image instead). Try getting the actual URL in the ajax call and enter it into a new browser window. That should give you a clue on what is going on with that call. – stn9000 Nov 13 '14 at 06:10
Ahh ok that shows the image when i paste the raw url – TheGeneral Nov 13 '14 at 06:13
I found a discussion on your issue on this site. Apparently you have to go away from JQuery. Here is the link: http://stackoverflow.com/questions/17657184/using-jquerys-ajax-method-to-retrieve-images-as-a-blob – stn9000 Nov 13 '14 at 15:50
Ok thanks, i ended up getting this working with dynamic html, however ill test this out, if it works i might get you to paste the javascript in your answer, to make it a little more concise – TheGeneral Nov 13 '14 at 22:08

Load Jpeg image from MVC Controller via Javascript

1 Answers1