Using jSignature in Intraweb and storing the signature data in an async event

[jeroen.rottink]

Well posting my solution for anyone interested:

Create a hidden field to hold the signature data.

Code:

constructor TDlgSignature.Create(AOwner: TComponent);
begin
  inherited;
  // will be used to transfer the signature content
  HiddenFields.AddPair('signature', '');
end;

Register a callback that is called when storing the signature

Code:

RegisterCallBack('StoreSignature', StoreSignature);

Client side calls a JavaScript function to prepare the signature and send it to the server

Code:

function sendSignature() {
  var $sigdiv = $('#signature');
  var signatureData = $sigdiv.jSignature("getData");

  document.getElementById("HIDDEN_signature").value = signatureData;
  AddChangedControl("signature");
  ajaxNotify("StoreSignature");
}

$(document).ready(function(){
  // This is the part where jSignature is initialized.
  $('#signature').jSignature();
  $('#BTNSIGN').click(sendSignature);
});

Because the ‘signature’ control is marked as changed, Intraweb will perform a HTTP POST including the changed control value. 

In the callback on the server side you can read TIWForm.HiddenFields again and use the passed signatureData from the client.

Code:

procedure TDlgSignature.StoreSignature(EventParams: TStringList);
var
  FormatSignature: string;
  PngImage: TPngImage;
  StrStream: TStream;
  MemStream: TStream;
  Signature: string;
begin
  Signature := HiddenFields.Values['signature'];

  FormatSignature := 'data:image/png;base64,';
  if Signature.StartsWith(FormatSignature)
  then begin
    Delete(Signature, 1, Length(FormatSignature));

    PngImage := TPngImage.Create;
    MemStream := TMemoryStream.Create;
    StrStream := TStringStream.Create(Signature);
    try
      TNetEncoding.Base64.Decode(StrStream, MemStream);
      MemStream.Position := 0;
      PngImage.LoadFromStream(MemStream);
      IWImage1.Picture.Graphic := PngImage;
    finally
      StrStream.Free;
      MemStream.Free;
      PngImage.Free;
    end;
  end;
end;