Technical Articles
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.
Very clever solution! Thanks for sharing!