How to parse into base64 string the binary image from response?

by

I think part of the problem you’re hitting is that jQuery.ajax does not natively support XHR2 blob/arraybuffer types which can nicely handle binary data (see Reading binary files using jQuery.ajax).

If you use a native XHR object with xhr.responseType="arraybuffer", then read the response array and convert it to Base64, you’ll get what you want.

Here’s a solution that works for me:

// http://www.henryalgus.com/reading-binary-files-using-jquery-ajax/
function fetchBlob(uri, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', uri, true);
  xhr.responseType="arraybuffer";

  xhr.onload = function(e) {
    if (this.status == 200) {
      var blob = this.response;
      if (callback) {
        callback(blob);
      }
    }
  };
  xhr.send();
};

fetchBlob('https://i.imgur.com/uUGeiSFb.jpg', function(blob) {
  // Array buffer to Base64:
  var str = btoa(String.fromCharCode.apply(null, new Uint8Array(blob)));

  console.log(str);
  // Or: '<img src="data:image/jpeg;base64,' + str + '">'
});

https://jsfiddle.net/oy1pk8r3/2/

Produces base64 encoded console output: /9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAIBAQIBAQICAgICAgICAw.....

More Related Contents:

  1. How can you encode a string to Base64 in JavaScript?
  2. Get image data URL in JavaScript?
  3. Using JavaScript to display a Blob
  4. How to save a base64 image to user’s disk using JavaScript?
  5. Using raw image data from ajax request for data URI
  6. JS – get image width and height from the base64 code
  7. React-Native: Convert image url to base64 string
  8. How to download a base64-encoded image?
  9. Get image width and height from the Base64 code in JavaScript
  10. ReadFile in Base64 Nodejs
  11. How can I convert an image into Base64 string using JavaScript?
  12. How to convert file to base64 in JavaScript?
  13. Asynchronously load images with jQuery
  14. Resize image with javascript canvas (smoothly)
  15. How to convert Base64 String to javascript file object like as from file input form?
  16. Is it safe to assume strict comparison in a JavaScript switch statement?
  17. Upload base64 image with Ajax
  18. How do the JavaScript relational comparison operators coerce types?
  19. Disable dragging an image from an HTML page
  20. Javascript Image Url Verify
  21. Open image in new window
  22. Make image fill div completely without stretching
  23. How to render Streamable image on React coming from FastAPI server?
  24. how to display base64 encoded pdf?
  25. Add image in pdf using jspdf
  26. Convert a string to base64 in JavaScript. btoa and atob are deprecated
  27. How to bind img src to data in Vue
  28. How to get HTTP status code of tags
  29. canvas- Cropping images in different shapes
  30. Compare two Images in JavaScript

Leave a Comment