Get Base64 encoding for images in TMS Web Core¶

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)
    // ...
  public  
    // ...
    property Base64Image: string read GetBase64Img;
  end;

Let’s try this functionality. Drop (1) a TWebImage (WebImage) and a (2) TWebMemo (WebMemo) onto 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);
begin
  WebImage.URL :=
    'https://images.pexels.com/photos/' +
    '2355519/pexels-photo-2355519.jpeg';
  WebMemo.Lines.Text := WebImage.Base64Image;
end;

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.