How to create a BSP Signature

Background

For a recent project there was a requirement to capture an approval signature via a BSP page. This signature would then be stored and printed with a Smartform. (It could also have been used in an Adobe form.)

Overview

• Using HTML Canvas capture the signature data into a JPEG
• Pass the raw jpeg data to the back-end via a hidden field
• Decode the Base64 data into a XSTRING and then into BINARY data
• Convert the JPEG into a BMP using the SAP Internet Graphics Server (IGS)
• Convert the BMP into BDS format for use in the Smartform

In Detail

Setup a hidden field in the BSP page to pass the data to the back-end.

<htmlb:inputField id = "IMAGE" visible = "FALSE" value = "//MODEL/IMAGE_DATA" />

Then capture the canvas data to a JPEG. This code is called via a button click.

var image = canvas.toDataURL("image/jpeg");
var modelImage = document.getElementById("IMAGE");
var imageData = image.split(',');
modelImage.value = imageData[1];

In the server event in the back-end, this is then decoded from Base64.

data: lr_utility type ref to cl_http_utility,
      lv_buffer type xstring.

  create object lr_utility.
  lv_buffer = lr_utility->decode_x_base64( model->image_data ).

Once decoded the data is then converted to BINARY.

data: lv_length type i,
      lt_bin_255 type w3mimetabtype.
 
 call function 'SCMS_XSTRING_TO_BINARY'
    exporting
      buffer        = lv_buffer
    importing
      output_length = lv_length
    tables
      binary_tab    = lt_bin_255.

Then use the IGS to convert to a BMP.

  data: lr_igs_imgconv type ref to cl_igs_image_converter,
        lv_img_type type w3conttype,
        lv_img_size type w3contlen.

  lv_img_size = lv_length.

  create object lr_igs_imgconv
    exporting
      destination = 'IGS_RFC_DEST'.

  lr_igs_imgconv->set_image( exporting
    blob      = lt_bin_255
    blob_size = lv_img_size ).

  lr_igs_imgconv->input  = 'image/jpeg'.
  lr_igs_imgconv->output = 'image/x-ms-bmp'.

  lr_igs_imgconv->execute( exceptions
    communication_error = 1
    internal_error = 2
    external_error = 3
    others = 4 ).

  check sy-subrc is initial.

  lr_igs_imgconv->get_image( importing
    blob      = lt_bin_255
    blob_size = lv_img_size
    blob_type = lv_img_type ).

Finally the BMP can be converted for use in the Smartform.

call function 'SAPSCRIPT_CONVERT_BITMAP_BDS' ...

Summary

Using a JPEG rather than a PNG ensures that the resulting BMP does not end up as a black blob; the PNG is saved as transparent and this is interpreted as a black background colour in the BMP.