Using the Data-uri-to-img-url service with jquery jsonp not working

Question

I'm trying to use this to get image URL's http://aminariana.github.io/data-uri-to-img-url/ for sharing on facebook.

I just can't work out how to make the post request using jquery:

# Make a POST request with param 'image[data_uri]' set to the above DataURI input. # This could be from an HTML form with a textarea, or programmatically using an AJAX POST request.

I have setup a JS Fiddle that creates an image in canvas, converts the image to the datauri http://jsfiddle.net/7asutg7c/ it's just the last part of using jsonp in jquery to send the parameter and get the URL back that I am completely lost on.

    var url = 'http://data-uri-to-img-url.herokuapp.com/images.json';.
    $.ajax({
       type: 'POST',
       url: url,
       async: false,
       // data: dataURL,
       contentType: "application/json",
       dataType: 'jsonp',
       success: function(json) {
       console.log(json.url);
     },
      error: function(e) {
      console.log(e.message);
     }
    });

My initial thought was to set data to the dataURI but I get "Failed to load resource: the server responded with a status of 414 (Request-URI Too Large)" ... so I am a little stuck about how I should be sending that dataURI.

Any help would be greatly appreciated.

Answer 1

Create a JavaScript object like this,

var myData = {
  image: {
    data_uri: your_data_uri_here
  }
};

and then pass that as value of the data parameter of the $.ajax call.