Preface – This post is part of the UI5 Integration Programs series.

When do we need to convert a Base64 to Image

You may need to convert a Base64 string to an image for various reasons, such as:

1. Displaying images on a web page: If you have a Base64 encoded image and you want to display it on a web page, you can create an HTML img element and set its src attribute to the Base64 encoded image data.
2. Storing images in databases: If you have Base64 encoded images stored in a database and you want to display them, you need to convert them back to an image format before displaying them.
3. Saving images to the file system: If you have Base64 encoded images and you want to save them to the file system, you need to first decode the Base64 data and then write the resulting binary data to a file.
4. Using images in image processing applications: If you want to use Base64 encoded images in image processing applications, you need to convert them back to an image format so that they can be processed.

In each of these cases, you will need to decode the Base64 string and write the binary data to an image file in a format such as PNG or JPEG. The exact steps to convert a Base64 string to an image will depend on the programming language you’re using and the specific requirements of your project.

Steps to convert a Base64 to Image using JavaScript

Here are the steps to convert a Base64 string to an image using JavaScript:

1. Split the Base64 string at the comma to extract the content type and data:

const [type, data] = base64.split(",");

2. Create a Blob object using the data and the content type:

const blob = new Blob([data], { type });

3. Create an URL for the Blob object using URL.createObjectURL:

const url = URL.createObjectURL(blob);

4. Create an HTML img element and set its src attribute to the URL:

const image = new Image();
image.src = url;

5. Append the image to the page or use it in any other way you need:

document.body.appendChild(image);

Here’s a complete example that converts a Base64 string to an image and displays it on a page:

const base64 = "data:image/png;base64,iVBORw0KG...";
const [type, data] = base64.split(",");
const blob = new Blob([data], { type });
const url = URL.createObjectURL(blob);
const image = new Image();
image.src = url;
document.body.appendChild(image);

 

Steps to convert a Base64 to an Image using SAP UI5

To convert Base64 to Image in SAP UI5 using the element Image and setting its source value, as shown below:

View.xml

<mvc:View controllerName="Test.Test.controller.Main" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m" xmlns:core="sap.ui.core"
    xmlns:html="http://www.w3.org/1999/xhtml" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form" xmlns:RichTextEditor="sap.ui.richtexteditor">
    <Shell id="shell">
        <App id="app">
            <pages>
                <Page id="page" title="Base64 to Image Converter using UI5">
                    <content>
                        <VBox class="sapUiSmallMarginBegin">
                            <HBox>
                                <TextArea id="idBase64Area" value='Base 64 Value' editable="true" height="300px" width="500px" change="onChangeDP"/>
                                <Title text="Your Image"/>
                                <Image id="idDP" width="30%"/>
                            </HBox>
                        </VBox>
                    </content>
                </Page>
            </pages>
        </App>
    </Shell>
</mvc:View>

 

Controller.js

sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function (Controller) {
    "use strict";
    return Controller.extend("Test.Test.controller.Main", {
        onChangeDP: function (oEvent) {
            var base64Data = this.byId("idBase64Area").getValue();
            this.byId("idDP").setSrc(base64Data);
        }
    });
});

 

Output