Skip to Content
Technical Articles
Author's profile photo Enno Wulff

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

 

Assigned Tags

      10 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Shai Sinai
      Shai Sinai

      Instead of an online converter, you can also use FM SCMS_BASE64_ENCODE_STR to convert a binary (XSTRING) into Base64.

      P.S.

      I think you may also use FM SCMS_XSTRING_TO_BINARY instead of the local implementation of method convert_xstring_to_table.

      Author's profile photo Enno Wulff
      Enno Wulff
      Blog Post Author

      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.

      Author's profile photo Marco Krapf
      Marco Krapf
      Join RFC 

      Rennpony Fan Club

      Author's profile photo Michael Keller
      Michael Keller

      I like 8bit and 16bit art. Nice example.

      Author's profile photo Enno Wulff
      Enno Wulff
      Blog Post Author

      I thought about directly mentioning you first but then was quite sure that you will find this arts gem by yourself... 😀

      Author's profile photo Michael Keller
      Michael Keller

      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.

      Author's profile photo Ged Hurst
      Ged Hurst

      A fun blog. I expanded my knowledge of ABAP and now I know about the Rennpony Fan Club.

      Author's profile photo Enno Wulff
      Enno Wulff
      Blog Post Author

      This. is. no. fun!!

      This is serious business data manipulation and real-time racing simulation stuff! 😉

      Author's profile photo Juwin Pallipat Thomas
      Juwin Pallipat Thomas

      Is it not possible to display base64 image using an HTML container without any conversions?

      Ref: https://en.wikipedia.org/wiki/Data_URI_scheme

      Thanks,

      Juwin

      Author's profile photo Enno Wulff
      Enno Wulff
      Blog Post Author

      yes, this is possible.

      But the intention was to use the picture control and not an HTML control.