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"

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.