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"

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.