Skip to Content

In 2007 Thomas Jung wrote a blog ABAP Bitmap Image Processing Class. Thomas’ blog contains a lot of excellent information regarding how to fetch, convert, cache and display an image in Web Dynpro ABAP. However, looking into the  Web Dynpro ABAP forum it seems that the information has bypassed several ABAP developers. This blog focuses on one image processing only and should be considered a simple step-by-step guide of how to display a tiff image in Web Dynpro ABAP. The image format could be any other format supported by the Internet Graphics Server (IGS).

Displaying a tiff image in Web Dynpro ABAP includes (1) fetching a tiff image, (2) converting it into a browser supported content type using the IGS, (3) caching it on the server, and (4) binding the URL to an image element.

Prerequisite

Make sure that your IGS is up and running, for example by executing program GRAPHICS_IGS_IMGCONV_DEMO. More information can be found on help.sap.com. If your IGS is not up and running, then contact your basis team.  

1. Fetch

Fetching, converting, and caching an image is not a typical Web Dynpro component task and should therefore be placed in an assistance class.  

The ZCL_ASSISTANCE class contains four methods, but there could be many more methods. For example, instead of fetching the image via a URL or MIME, the image could be read directly from a Document Management System (DMS).

Method FETCH_IMAGE_URL

The FETCH_IMAGE_URL method gets a tiff image from an URL and returns a binary string.

Implementation of method FETCH_IMAGE_URL.


METHOD fetch_image_url.
  "
  " References
  DATA: lo_client TYPE REF TO if_http_client.
  "
  " Variables
  DATA lv_img_xstring TYPE xstring.
  DATA lv_img_string TYPE string.
  DATA lv_return_code TYPE i.
  DATA lv_error_text TYPE string.

  TRY.
      " Create the HTTP client
      CALL METHOD cl_http_client=>create_by_url
        EXPORTING
          url                = iv_url
        IMPORTING
          client             = lo_client
        EXCEPTIONS
          argument_not_found = 1
          plugin_not_active  = 2
          internal_error     = 3.

      IF sy-subrc = 0.
        " Set header fields.
        CALL METHOD lo_client->request->set_header_field
          EXPORTING
            name  = '~request_method'
            value = 'GET'.

        CALL METHOD lo_client->request->set_header_field
          EXPORTING
            name  = '~server_protocol'
            value = 'HTTP/1.1'.

        CALL METHOD lo_client->request->set_header_field
          EXPORTING
            name  = 'Content-Type'
            value = 'image/tiff'.

        lo_client->send( ).
        lo_client->receive( ).

        lo_client->response->get_status( IMPORTING code = lv_return_code ).

        "get the response as binary data
        lv_img_xstring = lo_client->response->get_data( ).

        "close connection
        lo_client->close( ).
      ENDIF. "sy-subrc = 0
    CATCH cx_root.
  ENDTRY.

  rv_xstring = lv_img_xstring.

ENDMETHOD.

Method FETCH_IMAGE_MIME

The FETCH_IMAGE_MIME is very similar to the FETCH_IMAGE_URL method. It gets a tiff image from the MIME repository and returns a binary string.

Implementation of method FETCH_IMAGE_MIME. 

METHOD fetch_image_mime.   "   " References   DATA lr_mime_repository TYPE REF TO if_mr_api.   "   " Variables   DATA lv_img_xstring TYPE xstring.   TRY.       "MIME repository reference       lr_mime_repository = cl_mime_repository_api=>get_api( ).       "Get file from MIME       CALL METHOD lr_mime_repository->get         EXPORTING           i_url     = iv_path         IMPORTING           e_content = lv_img_xstring.     CATCH cx_root.   ENDTRY.   "Return binary representation of file   rv_xstring = lv_img_xstring. ENDMETHOD.

2. Convert

After fetching the tiff image it should be converted into a browser supported format, as for example jpeg. Method CONVERT_IMAGE uses the fetched image together with the input (tiff) and output (jpeg) format to return a binary representation of the converted image.

Implementation of method CONVERT_IMAGE.

METHOD convert_image.   "Objects   DATA lo_igs_imgconv TYPE REF TO cl_igs_image_converter.   "Variables   DATA lv_img_blob    TYPE w3mimetabtype.   DATA lv_img_size    TYPE w3param-cont_len.   DATA lv_img_xstring TYPE xstring.   "Create IGS reference   CREATE OBJECT lo_igs_imgconv.   "input image/tiff, output image/jpeg   lo_igs_imgconv->input = iv_input_content_type.   lo_igs_imgconv->output  = iv_output_content_type.   CALL FUNCTION 'SCMS_XSTRING_TO_BINARY'     EXPORTING       buffer        = iv_xstring     IMPORTING       output_length = lv_img_size     TABLES       binary_tab    = lv_img_blob.   CALL METHOD lo_igs_imgconv->set_image     EXPORTING       blob      = lv_img_blob       blob_size = lv_img_size.   CALL METHOD lo_igs_imgconv->execute     EXCEPTIONS       OTHERS = 1.   IF sy-subrc IS INITIAL.     CALL METHOD lo_igs_imgconv->get_image       IMPORTING         blob      = lv_img_blob         blob_size = lv_img_size.     CALL FUNCTION 'SCMS_BINARY_TO_XSTRING'       EXPORTING         input_length = lv_img_size       IMPORTING         buffer       = lv_img_xstring       TABLES         binary_tab   = lv_img_blob       EXCEPTIONS         failed       = 1         OTHERS       = 2.   ENDIF.   rv_xstring = lv_img_xstring. ENDMETHOD.

3. Cache

The following method returns a URL of the converted XSTRING. I found the implementation on SDN.

Implementation of CACHE_IMAGE

METHOD cache_image.   DATA lv_url TYPE string.   "Create the cached response object that we will insert our content into   DATA: cached_response TYPE REF TO if_http_response.   CREATE OBJECT cached_response     TYPE       cl_http_response     EXPORTING       add_c_msg        = 1.   "cached_response->set_compression(     options = cached_response->IF_HTTP_ENTITY~CO_COMPRESS_IN_ALL_CASES ).   TRY. " ignore, if compression can not be switched on       CALL METHOD cached_response->set_compression         EXPORTING           OPTIONS = cached_response->co_compress_based_on_mime_type         EXCEPTIONS           OTHERS  = 1.     CATCH cx_root.   ENDTRY.   "set the data and the headers   cached_response->set_data( iv_img_blob ).   cached_response->set_header_field(      name  = if_http_header_fields=>content_type        value = iv_img_type ).   "Set the Response Status   cached_response->set_status( code = 200 reason = 'OK' ).   "Set the Cache Timeout - 30 min   cached_response->server_cache_expire_rel( expires_rel = 1800 ).   "Create a unique URL for the object   DATA: guid TYPE guid_32.   CALL FUNCTION 'GUID_CREATE'     IMPORTING       ev_guid_32 = guid.   CONCATENATE '/usr/sap/public' '/' guid '.' 'jpg' INTO lv_url.   "Cache the URL   cl_http_server=>server_cache_upload(      url      = lv_url      response = cached_response ).   "Return URL   rv_url = lv_url. ENDMETHOD.

4. Display

This section covers how to diplay the converted tiff image in Web Dynpro ABAP. Start by adding the above described assistance class ZCL_ASSISTANCE to the Web Dynpro ABAP component.

Component

The Web Dynpro ABAP object tree will look as follows.

Context

Go to the Context tab and create an IMAGE node.

Create a SOURCE attribute in the IMAGE node.

Upon creating the IMAGE node and SOURCE attribute the Context should look as follows.

View

In the view create an image element under the root container.

Bind the image element to the above created context attribute.

Implement the WDDOINIT method.

METHOD wddoinit .   "   "Constants   CONSTANTS lc_input_content_type TYPE string VALUE  'image/tiff'.   CONSTANTS lc_output_content_type TYPE string VALUE 'image/jpeg'.   CONSTANTS lc_path TYPE string      VALUE '/SAP/BC/WebDynpro/SAP/Z_TIF_IMAGE_DISPLAY/TIFF.tif'.   "   "References   DATA lr_node_image TYPE REF TO if_wd_context_node.   "   "Variables   DATA lv_img_xstring TYPE xstring.   DATA lv_img_cache_url TYPE string.   "Fetch IMAGE   lv_img_xstring = wd_assist->fetch_image_mime( lc_path ).   "Convert image   lv_img_xstring = wd_assist->convert_image(       iv_xstring             = lv_img_xstring       iv_input_content_type  = lc_input_content_type       iv_output_content_type = lc_output_content_type       ).   "Cache image   lv_img_cache_url = wd_assist->cache_image(       iv_img_blob = lv_img_xstring       iv_img_type = lc_output_content_type       ).   "Set context url   lr_node_image = wd_context->get_child_node( wd_this->wdctx_image ).   lr_node_image->set_attribute(      name = 'SOURCE'       value = lv_img_cache_url ). ENDMETHOD.

Application


Finally, create an application of the component and test it.

(Image source: wikipedia.org)

To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

  1. Johan von Reedtz
    This is excellent information and being the “initiator” for the real world customer case I am superhappy this did work.
    This also again demonstrates the powerfulness of the SDN platform where you can take some pieces from existing content and then add and transform this into something new even though it seems very difficult from the beginning.
    BR, Johan
    (0) 
    1. Bjorn-Henrik Zink Post author
      Hi Johan,

      thanks for your comment.

      I fully agree with you regarding the power of the SCN. All the coding in this blog has been taken from blogs, wikis, and forums of SCN – I have merely wrapped the coding into an assistance class and Web Dynpro component.

      /Björn-Henrik

      (0) 
      1. Johan von Reedtz
        Björn-Henrik,
        Now, as both you and I know for sure it is not THAT easy even though pieces of information can be found here and there.
        It takes a really good consultant to get the pieces together and make something even better from these pieces. You did certainly demonstrate this here!
        BR, Johan
        (0) 
  2. Alejandro Cordero

    Thanks very much for this blog, it is really helpful.

    I want to add that it is possible to convert multi-pages TIFF, generating a JPEG per page, your code only converts the first page.

    We can achieve this calling method lo_igs_imgconv->get_image_count() (after method EXECUTE) to get the number of Images/Pages generated and after that pass a page number to parameter INDEX in method get_image(), this will return the JPEG for that page.

    Regards,

    Ale.

    (0) 

Leave a Reply