Question

31

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

rated 0 times [ 32] [ 1] / answers: 1 / hits: 147163 / 11 Years ago, mon, july 15, 2013, 12:00:00

I recently asked another (related) question, which lead to this follow up question:
Submitting data instead of a file for an input form

Reading through the jQuery.ajax() documentation (http://api.jquery.com/jQuery.ajax/), it seems the list of accepted dataTypes doesn't include images.

I'm trying to retrieve an image using jQuery.get (or jQuery.ajax if I have to), store this image in a Blob and upload it to another server in a POST request. Currently, it looks like due to the mismatch in datatypes, my images end up being corrupt (size in bytes mismatch, etc.).

The code to perform this is as follows (it is in coffeescript but shouldn't be difficult to parse):

handler = (data,status) ->

  fd = new FormData

  fd.append(file, new Blob([data], { type : image/png }))

  jQuery.ajax {

    url: target_url,

    data: fd,

    processData: false,

    contentType: multipart/form-data,

    type: POST,

    complete: (xhr,status) ->

      console.log xhr.status

      console.log xhr.statusCode

      console.log xhr.responseText



  }

jQuery.get(image_source_url, null, handler)

How can I retrieve this image as a blob instead?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ramiro

Add To Favorites

Follow

Total Points: 431

Total Questions: 96

Total Answers: 105

Location: Northern Ireland

Member since Mon, Nov 14, 2022

2 Years ago

answered 11 Years ago neildrews · Accepted Answer

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%>