Obtaining and using string representations of images

The following steps describe how to convert an image to a string representation.

  1. Select menu item Tools > Image converter
  2. click on the Open.. button to browse for your image file.
  3. Click on the Convert button.
    The required code will now be in the clipboard.
  4. Paste the code as private declaration in a class derived from TWCustomControl.
    See the TStringImage class in our example below.
  5. Change the name of the constant as necessary.
The following code to use a string representation of an image is simpler than the TSmiley and TCoinImage demos supplied with Smart Mobile Studio.
unit Form1;

interface

uses 
  SmartCL.System, SmartCL.Graphics, SmartCL.Components, SmartCL.Forms, 
  SmartCL.Fonts, SmartCL.Borders, SmartCL.Application;

type
  TStringImage = class(TW3CustomControl)
    private const IMAGE_DATA ='data:image/png;base64,'+
      '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' +
      'nFrUHeQ/5OCMtpM9L5EAAAAASUVORK5CYII=';
    protected
      procedure InitializeObject; override;
  end;

  TForm1=class(TW3form)
  private
    {$I 'Form1:intf'}
    FStringImage: TStringImage;
  protected
    procedure InitializeObject; override;
    procedure FinalizeObject; override;
    procedure Resize; override;
  end;

implementation

{ TStringImage}
procedure TStringImage.InitializeObject;
begin
  inherited;
  InnerHTML := '<img src="' + IMAGE_DATA + '" />';
end;

{ TForm1}
procedure TForm1.InitializeObject;
begin
  inherited;
  {$I 'Form1:impl'}
  FStringImage := TStringImage.Create(Self);
end;

procedure TForm1.FinalizeObject;
begin
  inherited;
  FStringImage.Free;
end;

procedure TForm1.Resize;
begin
  inherited;
  FStringImage.SetBounds(30, 30, 36, 50);
end;

initialization
  Forms.RegisterForm({$I %FILE%}, TForm1);

end. 
   
Programming - a skill for life!

Useful for games, with drawing routines (including transforms and text fonts), images, sprites and WebGL 3D graphics. Now includes Box2D physics and rendering by Pixi.js.