Display base64 encoded picture in SAPGUI
Today I stumbled upon an old test report where I tried to display a base64 encoded picture in a container.
This is how it looks
This is how it works
BASE64 encoding is a mehtod to store binary data with codepage undependend readable ASCII characters. Readable characters can be stored in an ABAP report which makes it possible to store a picture in a source code.
To encode a picture to BASE64 you will need to have a converter. There are many converters online avaible, e.g. this one: https://www.base64encode.net/base64-image-encoder
For demonstration I used a very small picture. I found one in the 8-bit-retro-Excel-racing-simulation galoppsim by Marco Krapf in the last Galoppsim corona cup. If you do not know Galoppsim.racing so far, I recommend to visit https://galoppsim.racing/ as soon as possible,
I chose Rennpony as suitable candiate for my demonstration. Even though the marvelous graphics are in 8bit-mode I still had to concert them to a very small size. The displayed picture has a size of 21×19 pixels.
So I uploaded the smal graphic to the base64-encoding website and got the following string:
R0lGODlhFQATADMAACH5BAAAAAAALAAAAAAVABMAg////19qcHaPjo6ij5XL/p3Mx6rR3 qTS+LPUksPessjcysvl+ufbrvrclPfv1Or0+wSMEMg5F1mY6g0eztzmNA3TKEu4LYaptI 2jShbBMIahlDNwXCwDYcdQeQ6HwEDxOyiKmyNhKhj8pobYBjkl6K5TokZRKBe+3enhRnE g3u/EbwH2aiWJfB6hfjzAa3d6ewYHDzRpWQ0SCoMJBoc0gCYOMo15hho1aiaLAAqgkRR/ aYE9iKVQPZtppwCsXREAOw==
This string has to be decoded into an xstring.
The xstring has to be converted to an xstring table.
This xstring table can be passed to function module DP_CREATE_URL which returns a pointer (url) to these bytes. It then can be used in CL_GUI_PICTURE control to display the data.
REPORT. CLASS demo DEFINITION. PUBLIC SECTION. TYPES _url TYPE c LENGTH 200. TYPES: BEGIN OF _graphic_row, line(255) TYPE x, END OF _graphic_row, _graphic_tab TYPE STANDARD TABLE OF _graphic_row WITH DEFAULT KEY. METHODS show. PRIVATE SECTION. METHODS get_image_url RETURNING VALUE(url) TYPE url. METHODS convert_xstring_to_table IMPORTING xstr TYPE xstring RETURNING VALUE(tab) TYPE _graphic_tab. DATA picture TYPE REF TO cl_gui_picture. DATA container TYPE REF TO cl_gui_docking_container. ENDCLASS. CLASS demo IMPLEMENTATION. METHOD show. DATA: graphic_size TYPE i. CREATE OBJECT container EXPORTING extension = 300 no_autodef_progid_dynnr = 'X'. CREATE OBJECT picture EXPORTING parent = container. picture->load_picture_from_url( url = get_image_url( ) ). picture->set_display_mode( cl_gui_picture=>display_mode_fit ). ENDMETHOD. METHOD get_image_url. DEFINE a. CONCATENATE graphic_str &1 INTO graphic_str. END-OF-DEFINITION. DATA graphic_xstr TYPE xstring. DATA graphic_x TYPE x. DATA graphic_str TYPE string. DATA graphic_size TYPE i. DATA graphic_table TYPE _graphic_tab. TYPES ty_char160 TYPE c LENGTH 160. DATA local_pic TYPE STANDARD TABLE OF ty_char160. "GIF rennpony 16 colors a 'R0lGODlhFQATADMAACH5BAAAAAAALAAAAAAVABMAg////19qcHaP'. a 'jo6ij5XL/p3Mx6rR3qTS+LPUksPessjcysvl+ufbrvrclPfv1Or0'. a '+wSMEMg5F1mY6g0eztzmNA3TKEu4LYaptI2jShbBMIahlDNwXCwD'. a 'YcdQeQ6HwEDxOyiKmyNhKhj8pobYBjkl6K5TokZRKBe+3enhRnEg'. a '3u/EbwH2aiWJfB6hfjzAa3d6ewYHDzRpWQ0SCoMJBoc0gCYOMo15'. a 'hho1aiaLAAqgkRR/aYE9iKVQPZtppwCsXREAOw=='. CALL FUNCTION 'SSFC_BASE64_DECODE' EXPORTING b64data = graphic_str IMPORTING bindata = graphic_xstr EXCEPTIONS OTHERS = 8. graphic_table = convert_xstring_to_table( graphic_xstr ). CALL FUNCTION 'DP_CREATE_URL' EXPORTING type = 'image' "#EC NOTEXT subtype = 'gif' lifetime = cndp_lifetime_transaction "'T' TABLES data = graphic_table CHANGING url = url. ENDMETHOD. METHOD convert_xstring_to_table. DATA conv TYPE i. DATA offs TYPE i. DATA size TYPE i. DATA row TYPE _graphic_row. size = xstrlen( xstr ). CHECK size > 0. conv = size. offs = 0. WHILE conv > 255. row-line = xstr+offs(255). APPEND row TO tab. offs = offs + 255. conv = conv - 255. ENDWHILE. row-line = xstr+offs(conv). APPEND row TO tab. ENDMETHOD. ENDCLASS. PARAMETERS p_test. INITIALIZATION. NEW demo( )->show( ).
Instead of an online converter, you can also use FM SCMS_BASE64_ENCODE_STR to convert a binary (XSTRING) into Base64.
I think you may also use FM SCMS_XSTRING_TO_BINARY instead of the local implementation of method convert_xstring_to_table.
Thanks for the hint! I will check. /edit: Works perfectly!
the online converter is needed to convert a picture. If you did it in SAP you would also have to implement the upload.
Rennpony Fan Club
I like 8bit and 16bit art. Nice example.
I thought about directly mentioning you first but then was quite sure that you will find this arts gem by yourself... 😀
Fun fact: I was reading about image compression some days ago. It's interesting how many details of an image can be left out. A person recognizes what is meant based on his experience. For example, a well-known animal is recognized by many people. Certain buildings, even if they are well known, not necessarily.
A fun blog. I expanded my knowledge of ABAP and now I know about the Rennpony Fan Club.
This. is. no. fun!!
This is serious business data manipulation and real-time racing simulation stuff! 😉
Is it not possible to display base64 image using an HTML container without any conversions?
yes, this is possible.
But the intention was to use the picture control and not an HTML control.
thanks a lot. it's very helpful topic