Using jQuery’s ajax method to retrieve images as a blob

by

You can’t do this with jQuery ajax, but with native XMLHttpRequest.

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if (this.readyState == 4 && this.status == 200){
        //this.response is what you're looking for
        handler(this.response);
        console.log(this.response, typeof this.response);
        var img = document.getElementById('img');
        var url = window.URL || window.webkitURL;
        img.src = url.createObjectURL(this.response);
    }
}
xhr.open('GET', 'http://jsfiddle.net/img/logo.png');
xhr.responseType="blob";
xhr.send();

EDIT

So revisiting this topic, it seems it is indeed possible to do this with jQuery 3

jQuery.ajax({
        url:'https://images.unsplash.com/photo-1465101108990-e5eac17cf76d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=471ae675a6140db97fea32b55781479e',
        cache:false,
        xhr:function(){// Seems like the only way to get access to the xhr object
            var xhr = new XMLHttpRequest();
            xhr.responseType="blob"
            return xhr;
        },
        success: function(data){
            var img = document.getElementById('img');
            var url = window.URL || window.webkitURL;
            img.src = url.createObjectURL(data);
        },
        error:function(){
            
        }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<img id="img" width=100%>

or

use xhrFields to set the responseType

    jQuery.ajax({
            url:'https://images.unsplash.com/photo-1465101108990-e5eac17cf76d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=471ae675a6140db97fea32b55781479e',
            cache:false,
            xhrFields:{
                responseType: 'blob'
            },
            success: function(data){
                var img = document.getElementById('img');
                var url = window.URL || window.webkitURL;
                img.src = url.createObjectURL(data);
            },
            error:function(){
                
            }
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <img id="img" width=100%>

More Related Contents:

  1. Download the text over image using jquery
  2. Disable/enable an input with jQuery?
  3. $(document).ready equivalent without jQuery
  4. How to tell if browser/tab is active [duplicate]
  5. jQuery – setting the selected value of a select control via its text description
  6. Format numbers in JavaScript similar to C#
  7. What is the non-jQuery equivalent of ‘$(document).ready()’?
  8. How to get a number of random elements from an array?
  9. document.getElementById vs jQuery $()
  10. preventDefault() on an tag
  11. Difference of the value, prototype and property
  12. Stop a youtube video with jquery?
  13. Background-color hex to JavaScript variable
  14. How to pass javascript object from one page to other
  15. Selecting multiple from an html select element without using ctrl key
  16. jquery ajax readystate 0 responsetext status 0 statustext error
  17. how to assign javascript variable value to php variable
  18. Anchor tag download attribute not working :Bug in Chrome 35.0.1916.114
  19. Javascript: do an action after user is done scrolling
  20. Detect which form input has focus using JavaScript or jQuery
  21. XMLHttpRequest cannot load, No ‘Access-Control-Allow-Origin’ header is present on the requested resource [duplicate]
  22. jQuery – Create hidden form element on the fly
  23. jQuery: checking if the value of a field is null (empty)
  24. Sum numbers returns NaN
  25. How do you handle a form change in jQuery?
  26. lodash debounce not working in anonymous function
  27. Wrapping lists into columns
  28. Dynamically change Tweet Button “data-text” contents
  29. Why this regex is not working for german words?
  30. Add / Change parameter of URL and redirect to the new URL

Leave a Comment