I have some possible solutions ...
Solution 1
If your image is less than 25kb, you can do the following via YQL: select * from data.uri where url="http://jquery.com/jquery-wp-content/themes/jquery/images/ logo-jquery@2x.png " As a result, you can just capture the base64 image and go on. To do a POST through YQL, you should add something like and postdata="foo=foo&bar=bar" to check this article .
Caution: the performance of this method is probably low. There is quite a bit of latency, which makes the jump from the end user to YQL to the service, and then comes back. There is also some server side processing. YQL makes base64 encode the image and deliver some JSON response.
Decision 2
Enable CORS or go through another proxy. Once you do this, if you still cannot get the base64 data, you need to do 2 things. First add a jQuery transport that processes the binary. The second process executes a binary blob and converts it to base64.
Here is jQuery Binary Transport I found
$.ajaxTransport("+binary", function(options, originalOptions, jqXHR){ // check for conditions and support for blob / arraybuffer response type if (window.FormData && ((options.dataType && (options.dataType == 'binary')) || (options.data && ((window.ArrayBuffer && options.data instanceof ArrayBuffer) || (window.Blob && options.data instanceof Blob))))) { return { // create new XMLHttpRequest send: function(headers, callback){ // setup all variables var xhr = new XMLHttpRequest(), url = options.url, type = options.type, async = options.async || true, // blob or arraybuffer. Default is blob dataType = options.responseType || "blob", data = options.data || null, username = options.username || null, password = options.password || null; xhr.addEventListener('load', function(){ var data = {}; data[options.dataType] = xhr.response; // make callback and send data callback(xhr.status, xhr.statusText, data, xhr.getAllResponseHeaders()); }); xhr.open(type, url, async, username, password); // setup custom headers for (var i in headers ) { xhr.setRequestHeader(i, headers[i] ); } xhr.responseType = dataType; xhr.send(data); }, abort: function(){ jqXHR.abort(); } }; } });
After adding the transport, you can make any AJAX request.
$.ajax({ type: "POST", url: 'http://myservice.com/service/v1/somethingsomething', dataType: 'binary', success: function(imgData) { var img = new Image(), reader = new window.FileReader(); reader.readAsDataURL(imgData); reader.onloadend = function() { img.src = reader.result $('#logo-events').append(img); } } });
The reader should take Blob and release the base64 version. When the reader finishes the conversion / reading, he will create both the image and add it somewhere. GET or POST no longer matters.