Member Avatar for yaragalla_mural

By the following code i got image as the responce.

if (http.readyState == 4 && http.status == 200) {
      ver image=http.responseText;
}

actually when i gave a call to server using ajax the server responded with an image. so now i have stored the image in a variable "image". I think this is fine but now how do i save the binarydata in variable "image" as an image file or how do i display it in a browser? can we get the binarydata using ajax? if so how do i save or display it in browser? kindly help me? Thanks in advance.

  • 3 Contributors
  • 4 Replies
  • 318 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by yaragalla_mural

Dani AI

Generated

As discovered, reading an image from XHR using responseText usually corrupts the bytes because it treats the reply as text. The practical options are: (1) have the server return a usable URL and set that as the <img> src (what suggested), (2) have the server send a base64 data‑URI string and use that as src, or (3) return raw binary and use modern XHR/fetch to receive a Blob/ArrayBuffer, then convert that to an object URL or data URI for display or download.

A minimal fetch-based workflow that receives binary and displays it:

fetch('/image-endpoint')
  .then(res => { if (!res.ok) throw new Error(res.statusText); return res.blob(); })
  .then(blob => {
    const url = URL.createObjectURL(blob);
    document.getElementById('myImg').src = url;
    // when the image is no longer needed:
    // URL.revokeObjectURL(url);
  })
  .catch(console.error);

Notes and troubleshooting:

  • If the server must stay binary-first, set responseType='blob' on XHR or use response.blob() with fetch. Avoid responseText for binary.
  • For downloads, create an <a> with href = object URL and download attribute and trigger a click. For inline base64 (older browsers or JSON responses), convert the Blob with FileReader.readAsDataURL.
  • Check headers in DevTools: correct Content-Type (e.g. image/png), possible Content-Disposition (suggested filename), and CORS (Access-Control-Allow-Origin) for cross-site requests. Large images encoded to base64 increase memory and payload size ~33%; prefer Blobs/object URLs when possible.

’s jQuery src assignment will work fine when the response is already a URL or a data URI; it won’t fix raw binary returned as text.

Recommended Answers

All 4 Replies

Member Avatar for yaragalla_mural

even the following code from te above post is also giving error

ver image=http.responseText;

How to deal with binary data in ajax?

Member Avatar for designershiv

you can display the image in the following way

<img src="" class="imageTag">

//your script
$('.imageTag').attr('src',image);

This will show the image in the browser,Hope it helps

Member Avatar for hag++

What you need to do is have the server return a link to the image. Something like "". Then take that link and apply it to the "src" tag of an image element. designershiv's answer above would do it if you were using jQuery but it doesn't look like you are. To apply the source do this:

var imageElem = document.getElementById('image_elem_id');
imageElem.src = '';
Edited by hag++
Member Avatar for yaragalla_mural

Thank you so much.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.