How to create a BSP Signature

[Patrick_McMahon]

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.