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

i asked (related) question, lead follow question: submitting data instead of file input form

reading through jquery.ajax() documentation (http://api.jquery.com/jquery.ajax/), seems list of accepted datatypes doesn't include images.

i'm trying retrieve image using jquery.get (or jquery.ajax if have to), store image in blob , upload server in post request. currently, looks due mismatch in datatypes, images end being corrupt (size in bytes mismatch, etc.).

the code perform follows (it in coffeescript shouldn't difficult 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 retrieve image blob instead?

you can't jquery ajax, native xmlhttprequest.

var xhr = new xmlhttprequest(); xhr.onreadystatechange = function(){     if (this.readystate == 4 && this.status == 200){         //this.response you're looking         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();       

http://jsfiddle.net/mowglisanu/9xy46/58/show
http://jsfiddle.net/mowglisanu/9xy46/58