Getting image data from Canvas in correct form for CarrierWave and S3

I am trying to get images created in HTML5 Canvas to be added to the server via S3 in my Rails application. I use CarrierWave and Fog, but for now I need the user to save the image in place and then upload it to add to the site. I would prefer that they can add the image directly.

I found a post on Save html5 canvas output to my rails app that helped you.

I can use a hidden field to collect data in the data_url format (with the "image: image / png; base64" data removed, but I don't understand how to convert it to the correct (json?) Format that the carrier / S 3 will use.

The last answer to saving html5 canvas output in my rails app has a possible solution, but it seems to me like there should be a way to keep this computation outside of the controller.

I am currently using this function in my js file:

    $('#btnCanvas').mousedown(function(convert)
      {
      var dataURL =  canvas.toDataURL('image/png');
      var data = dataURL.replace(/^data:image\/png;base64,/, "");

      $('#hiddenCanvas').val(data);
      });

      

        
        
        
      

    

Is it possible to add code to this function to convert the data to the required format (replacing "data" in the last line with a new variable name for the corresponding data)? If so, where can I find this code to convert to javascript?

Or do I need to follow the path of changing the controller? Or should I try a different approach?

Any help would be greatly appreciated. Thank.