All Blog Posts  |  Next Post  |  Previous Post

TMS WEB Core v1.2 tips & tricks part 7: Get Base64 encoding for images


Thursday, June 27, 2019

Not so long ago, I posted about how to convert an image into a Base64 string. Today, I will show you that using TMS Web Core, this is even easier.

If we look into the source code of TMS Web Core, we find that the custom image control adds a public property called Base64Image of type string. That means, we can read the Base64 string of an image using that property. However, this is a read-only property. You cannot assign a Base64-string to it in order to assign image data. I will show a different approach how to work with Base64-strings for images in one of my next posts.

  TCustomImageControl = class(TCustomControl)
    // ...
    // ...
    property Base64Image: string read GetBase64Img;

Let’s try this functionality. Drop (1) a TWebImage (WebImage) and a (2) TWebMemo (WebMemo) on the form.

Implement the OnCreate event of the form as follows to load an image and assign its Base64 representation to the memo:

procedure TForm1.WebFormCreate(Sender: TObject);
  WebImage.URL :=
    '' +
  WebMemo.Lines.Text := WebImage.Base64Image;

Running the application results in the following app in the web browser:

Note that we can also assign a URL to the web image component in order to load an image.

Holger Flick


This blog post has received 4 comments.

1. Monday, October 07, 2019 at 2:51:03 PM

Very nice, but I have a lot of problems using TWebImageControl and TWebDbImageControl. I know how to save an image to Base64 and then to DB, but I don''t know how to load it back to the page.

Are there any additiona examples about TWeb(Db)ImageControl ?

Dino Gomezel

2. Monday, October 07, 2019 at 2:51:53 PM

You could extend the demo by showing how to load to image the Base64 string in the memo.

Dino Gomezel

3. Monday, October 07, 2019 at 5:32:05 PM

You can set an image as base64 data with

WebImageControl.URL= ''data:image/png;base64,''+ base64stringimagedata;

Bruno Fierens

4. Tuesday, October 08, 2019 at 9:37:04 AM

Thank you!

Dino Gomezel

Add a new comment:
  You will receive a confirmation mail with a link to validate your comment, so please use a valid email address.

All fields are required.

All Blog Posts  |  Next Post  |  Previous Post