How to create a BSP Signature
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.)
- 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
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;
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' ...
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.