convert json signatures captured by thomasjbradley's signature-pad to an image

ruby-signaturepad-to-image.rb

# see https://github.com/thomasjbradley/signature-pad for more details

instructions = JSON.load(data).map { |h| "line #{h['mx']},#{h['my']} #{h['lx']},#{h['ly']}" } * ' '
system "convert -size 198x55 xc:transparent -stroke blue -draw '#{instructions}' signature.png"

Thanks, this is pretty awesome!

If data is user input it is however also quite unsafe. I'd suggest

require 'open3'
instructions = JSON.parse(data).map { |h| "line #{h['mx'].to_i},#{h['my'].to_i} #{h['lx'].to_i},#{h['ly'].to_i}" } * ' '
Open3.popen3("convert -size 198x155 xc:transparent -stroke blue -draw @- signature.png") do |input, output, error|
  input.puts instructions
end

i want to save the image to paperclip . can you give some help

Thank you so much. This is great, using it my project.

i get some weird errors:

convert.exe: Non-conforming drawing primitive definition line' @ error/draw.c/DrawImage/3154. convert.exe: unable to open image116,28': No such file or directory @ error/blob.c/OpenBlob/2641.
convert.exe: no decode delegate for this image format `116,28' @ error/constitute.c/ReadImage/550.

For those wanting to use paperclip or other file attachment plugins, this seems to work pretty well...

instructions = JSON.parse(data).map { |h| "line #{h['mx'].to_i},#{h['my'].to_i} #{h['lx'].to_i},#{h['ly'].to_i}" } * ' '
tempfile = Tempfile.new(["signature", '.png'])
Open3.popen3("convert -size 198x55 xc:transparent -stroke blue -draw @- #{tempfile.path}") do |input, output, error|
    input.puts instructions
end
@your_model.your_attachment = tempfile

Thanks for the code although hard coding the image size in convert seems like a bad idea to me.

In case you're using Mongoid and would like to store the signature directly in mongodb...

field :image, type: Moped::BSON::Binary

...

instructions = JSON.parse(self.strokes).map { |h| "line #{h['mx'].to_i},#{h['my'].to_i} #{h['lx'].to_i},#{h['ly'].to_i}" } * ' '
Open3.popen3("convert -size #{WIDTH}x#{HEIGHT} xc:transparent -stroke blue -draw @- PNG:-") do |input, output, error|
      input.puts instructions
      input.close
      self.image = Moped::BSON::Binary.new(:generic, Base64.encode64(output.read))
end

to display ...

= image_tag "data:image/png;base64,#{@your_object.image}"

Can you create a demo app for us noobs on RoR

@Frank004 check out shomei

im getting this error with paperclip Paperclip::AdapterRegistry::NoHandlerError
the before_save its not running
some body got sample with paperclip.

@soffes thanks but cant get it to work with paperclip with that one
cant get to convert the data

I'm having issues with this as well. I get the error Paperclip::AdapterRegistry::NoHandlerError and No handler found for "[{.

Any suggestions??

Thanks!

Does anyone have any examples on how to actually, save signature to database using rails?

Deployed this successfully - unfortunately the signature doesn't fit in the form well. It cuts off portions of the signature - any ideas on how to resize not just the pad as shown in the documentation, but the signature itself?

Has anyone done this with CarrierWave? I'm new to rails, and don't have a clue how to even get started with this.

@kzink
paperclip attachment gives error " content type discovered from file command: inode/x-empty " and signature image is not attached to model

-draw @- seems to return without asking for STDIN input on OS X now.

is there any way to adjust the stroke font size ?

@lrbz - checkout signature-pad's options'. By default stroke is 2px wide, but you can adjust it :)

create file field hidden id profile_signature for attachment

var canvas = document.querySelector("canvas");
  var imfile;
  canvas.toBlob((blob) => {
    imfile = new File([blob], "signature.jpg", { type: "image/jpeg" })
    let dt = new DataTransfer();
    dt.items.add(imfile);
    document.getElementById("profile_signature").files = dt.files;
  });

first it will convert base64 into image and then attach it to your hidden field

create file field hidden id profile_signature for attachment

var canvas = document.querySelector("canvas");
  var imfile;
  canvas.toBlob((blob) => {
    imfile = new File([blob], "signature.jpg", { type: "image/jpeg" })
    let dt = new DataTransfer();
    dt.items.add(imfile);
    document.getElementById("profile_signature").files = dt.files;
  });

first it will convert base64 into image and then attach it to your hidden field

Here, the field "profile_signature" will look like what in HTML?

@harshitDispatch Looks like it should be a <input type="file">

@harshitDispatch Looks like it should be a <input type="file">

@branch14 Yeah that worked. Thanks for the help.