Greetings, I enjoyed watching your tutorial on signature pad. What I was wondering is how do you convert the signature into a PNG and store it alongside the form? I found some code below, but I was wondering if you had a better solution that I can use or is this good enough? Since I am running a SaaS company, I need the optimal way of implementing this feature. If possible, can you post the solution in the comments? Thank you
It really depends on the situation. I wouldn't necessarily jump to converting the signature over to an image and store it separately (more so than it already is). If you will be displaying the signature often, you could look into Fragment Caching as a possible solution for the areas where you're displaying the image. Converting and storing the signature as an image seems like unnecessary overhead as well as an added complication.
However, if this is the route you need, you could create an attr_accessor for the signature and convert it to an image and upload it like you're describing.
You haven't seemed to cover everything that you actually did in setting this up. What's the story with the signature.js file in the vendor folder? It's not in your show notes and you didn't even cover it in the video. Couldn't even get the JS to work, let alone integrating it with an actual Rails MVC structure.
Check the resources section where I have the raw signature.js file linked. Also, around the 25 second mark, I explain the js file being moved to the vendors folder. If you're working on a more modern application with webpacker/esbuild/importmaps, I would probably use the npm package instead and would now use a stimulus controller to initialize the signature pad.
Greetings, I enjoyed watching your tutorial on signature pad. What I was wondering is how do you convert the signature into a PNG and store it alongside the form? I found some code below, but I was wondering if you had a better solution that I can use or is this good enough? Since I am running a SaaS company, I need the optimal way of implementing this feature. If possible, can you post the solution in the comments? Thank you
Controller File
@yourmodel.signature = tempfileend
input.puts instructions
Open3.popen3("convert -size 600x100 xc:transparent -stroke blue -draw @- #{tempfile.path}") do |input, output, error|
tempfile = Tempfile.new(["signature", '.png'])
instructions = JSON.parse(params[:output]).map { |h| "line #{h['mx'].to_i},#{h['my'].to_i} #{h['lx'].to_i},#{h['ly'].to_i}" } * ' '
Carrierwave
rails generate uploader Signature
mount_uploader :signature, SignatureUploader
It really depends on the situation. I wouldn't necessarily jump to converting the signature over to an image and store it separately (more so than it already is). If you will be displaying the signature often, you could look into Fragment Caching as a possible solution for the areas where you're displaying the image. Converting and storing the signature as an image seems like unnecessary overhead as well as an added complication.
However, if this is the route you need, you could create an attr_accessor for the signature and convert it to an image and upload it like you're describing.
Will love to see a converting signature and store it like a img