RUBY ON RAILS – HOW TO GENERATE AN IMAGE FROM THE SIGNATURE PAD (JQUERY PLUGIN) AND UPLOAD IT TO AMAZON S3 USING CARRIERWAVE

Posted on Friday, June 5th, 2015

If you are using Signature pad(jQuery plugin) to get signatures from the users. You may want to convert that JSON string to an image so as to stick that image in the web app or something similar. In this tutorial I’m assuming that you have the following things already setup in your Ruby on Rails application, if not please use the following links to set them up:

  1. Signature pad: http://thomasjbradley.ca/lab/signature-pad/
    1. in Future I might write a quick Rails gem for this jQuery plugin to integrate it into your asset pipeline. But for now lets just use this.
  2. Carrierwave: https://github.com/carrierwaveuploader/carrierwave
    1. Video tutorial by Ryan Bates: Uploading to Amazon S3 
    2. As an alternative you can use paperclip << see the video tutorial to setup here

Once you have setup these 2 things you are all ready rock and create some graphics out of those JSON strings, so lets jump to the code now:

In this case the signature string is stored in the signature column and this will generate an image in the “tmp” folder with timestamp so that a unique file is created. “signature_image” is the column where Carrierwave uploader is mounted.

If you have setup your Carrierwave and Fog gem correctly this will work.