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.

The code

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( ).

Original Article:
https://blogs.sap.com/2020/04/19/display-base64-encoded-picture-in-sapgui/