How to get image using XMLHttpRequest in javascript

Question

I need to show a image which is generating in another page. I am using XMLHttpRequest to get the image from that page. Not able to do this please help.

Code Block

This is used to get image

    Bitmap IMG = myPane.GetImage(700,700,92);
    //Bitmap finalImage = new Bitmap(800, 800);
    byte[] byteArray = new byte[0];
    using (MemoryStream stream = new MemoryStream())
    {
        IMG.Save(stream, System.Drawing.Imaging.ImageFormat.Png);
        stream.Close();

        byteArray = stream.ToArray();
    }

    Response.Write(byteArray);

This is used to fetch that in javascript

 function b() {
           searchReq.onreadystatechange = ProcessResponse;
           searchReq.open("GET", 'Default.aspx', true);
           if (searchReq.overrideMimeType) {
               searchReq.overrideMimeType('text/plain; charset=x-user-defined');
           } else {
               searchReq.setRequestHeader('Accept-Charset', 'x-user-defined');
           }


           searchReq.send(null);
       }

       function ProcessResponse() {
           if (searchReq.readyState == 4) {
               if (searchReq.status == 200) {
                   retval = "";                      
                   var img = document.getElementById("myimg");
                   img.src = "data:image/jpeg;base64," +(searchReq.responseText);
               }
           }

       }

Thanks

share the code that you have tried and what the problem you are facing — Devesh
– Devesh, Commented May 22, 2013 at 8:52
Why on earth are you using XMLHttpRequest to retrieve an image? — Bart
– Bart, Commented May 22, 2013 at 8:53
Does the other page generating also HTML or it's generating only the image with content type image? — Stasel
– Stasel, Commented May 22, 2013 at 8:58

slebetman · Accepted Answer · 2013-05-22 09:03:45Z

1

Don't use XMLHttpRequest. Instead, just set the src of the img element to your .net script:

function b() {
    var img = document.getElementById("myimg");
    img.src = "Default.aspx";
}

If this doesn't work because the browser thinks it's the same image file just add some junk query param to the url:

img.src = "Default.aspx?q=" + Math.random();

answered May 22, 2013 at 9:03

slebetman

115k19 gold badges147 silver badges180 bronze badges

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

2 Comments

slebetman Over a year ago

Note that the browser doesn't care about image extensions. It will pass the image to an image parser and the image parser will determine the type of the image based on the content of the image, not the file extension.

user1685652 Over a year ago

Thanks... But i need to load the image dynamically based on certain condition please help in this scenario.

Software Guy · Accepted Answer · 2013-05-22 09:03:17Z

1

Image is a binary data and you have to modify some attributes of your XmlHttpRequest object in order to process binary data.

Mozilla's website has a good documentation about this subject here: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data

A code snippet from the above page does this:

var oReq = new XMLHttpRequest();
oReq.open("GET", "/myfile.png", true);
oReq.responseType = "blob";

oReq.onload = function(oEvent) {
  var blob = oReq.response;
  // ...
};

oReq.send();

answered May 22, 2013 at 9:03

Software Guy

3,2804 gold badges23 silver badges21 bronze badges

1 Comment

iNulty Over a year ago

This was the trick for me oReq.responseType = "blob";

Stasel · Accepted Answer · 2013-05-22 09:03:53Z

1

You don't need to use XMLHttpRequest to retrieve your image. It can easily achieved by placing <img> tag like this:

<img src="myImageGenerator.aspx" alt="..." />

I'm assuming your script is on myImageGenerator.aspx page

Please note that myImageGenerator.aspx need to return the correct content type: image/png You can do this in C#:

Response.Headers["Content-Type"] = "image/png";

Good luck

answered May 22, 2013 at 9:03

Stasel

1,2981 gold badge13 silver badges26 bronze badges

2 Comments

user1685652 Over a year ago

Thanks for the solution. But i need to change the image part or portion based on some condition and i don't want to refresh/ post back my whole page. I am using .net 2.0.

Stasel Over a year ago

Then you can use inline asp tags <img src='<% =SomeCondition() %>' /> or the javascript way (slebetman's answer) or addrunat="server"` to your img tag and use it with C#

Collectives™ on Stack Overflow

How to get image using XMLHttpRequest in javascript

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related