base64 decoding in rails 3 app without saving on server

Question

I have a Highcharts chart that I've converted from canvas to Base64 using the following javascript in my Rails 3.2 app.

canvg(document.getElementById('chart'), chart.getSVG())
var canvas = document.getElementById("chart");
var img = canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');

Now, I want to decode that image into an image file. However, I do not want to save it to the server because the sole purpose is to share on Facebook. I see two options:

-Send data from img back to the server and then convert that into an image stored in a temp folder, and render in view.

-Use javascript to decode the Base64 to a PNG file and open it in a new window.

Which direction should I take and how would I implement it? I've googled for hours and found a few examples that did parts of what I need, but I can't find the whole story.

This solution seemed very promising, but my image is too big to use a get request and I'm not very familiar with javascript so my attempts to use a post request failed:

Convert canvas to image and open in new window using ruby on rails and javascript

EDIT: As another potential solution, is there a web tool where I can send the base64 string that will automatically return a link with the image?

Answer 1

In short : your first option is the best

Long version: I'm not sure you can use base64 urls to post on facebook - for the same reasons that you can't use a GET request for huge base64 strings (do they support urls that are that long ?) - so you might actually need to save these pictures.

I'm not sure, but i think only pictures that are directly posted by the user (not linked to by a "share" button) are saved facebook-side, the other ones are actually sitting in your server.

First of all then, you should test if sending huge base64 strings directly through facebook API works - i tried creating a graph api meta tag for a small image using FB's online tool and it didn't work, so this doesn't look good (though i admit i don't know FB API well).

Let's admit you'll have to save this image for good - sending it to your server through an AJAX POST request is not that hard. If you use JQuery it's even really simple. Just use ruby to convert the base64 to an image file afterwards.

EDIT: I just wonder if i undestand well the question. Do you just want your users to be able to download the created image ? if so, they just have to right-click>save the generated image. The canvas2image lib can even make this easier for "right-click impaired" users ;)

EDIT 2: Here's an example of an ajax POST request with JQuery :

$.post( 
  // first argument : the URL you want to POST to
  'url/to/post.js',
  // second argument: the data to send to the server
  myData,
  // third argument : a callback function, 
  // that is called when the request is complete
  // and is passed the data returned by the server 
  // + response status (success, error...)
  function( data ){    
    alert('request completed, returned :' + data);
  });                  

so in your case, you could do something like this:

$.post(
  '<%= create_facebook_image_path format: :js %>',
  { base_64_string: img },
  function( data ){
    $('#viewport').append( $('<img />').attr({ src: data.url }) );
  });

more examples are available in JQuery's doc, including how to handle success / error status. I advise you to learn using JQuery, you will soon find how it is simple yet powerful !