Correct way to use IWCanvas

[troberts]

I'm trying to load an image into an IWCanvas. 

I have tried calling UploadPngImage, and in the PngImageUploaded event I have loaded an image from a file:

Code:

procedure TIWForm1.IWCanvas1PngImageUploaded(Sender: TObject; aImage: TPngImage);
begin
  aImage.LoadFromFile('Tick.png');
end;

But nothing is displayed.

What is the correct way to do this please?

[Alexandre Machado]

OnPngImageUploaded is an event that is triggered when a PNG image is uploaded, from the browser to the server. The event will be automatically triggered.

Seems to me that you are trying to draw something into the canvas. You can use LoadFromDataUrl() method. LoadFromDataUrl() takes a string as a parameter. The string can be an image encoded as Base64.

IWImageUtils unit contains a function named GraphicToBase64Str(Input: TGraphic, var Output: string);

You can pass a TPNG image to it and a string. The string will be filled with the Base64 data. Something like:

var
png: TPngImage;
s: string;
begin
png.LoadFromFile('Tick.png');
GraphicToBase64Str(png, s);
IWCanvas1.LoadFromDataUrl(s);
end;

This should work.

[troberts]

OnPngImageUploaded is an event that is triggered when a PNG image is uploaded, from the browser to the server. The event will be automatically triggered.

Seems to me that you are trying to draw something into the canvas. You can use LoadFromDataUrl() method. LoadFromDataUrl() takes a string as a parameter. The string can be an image encoded as Base64.

IWImageUtils unit contains a function named GraphicToBase64Str(Input: TGraphic, var Output: string);

You can pass a TPNG image to it and a string. The string will be filled with the Base64 data. Something like:

var
  png: TPngImage;
  s: string;
begin
  png.LoadFromFile('Tick.png');
  GraphicToBase64Str(png, s);
  IWCanvas1.LoadFromDataUrl(s);
end;

This should work.

Thanks Alexandre.

I have updated to IW15.3.11 but I still can't get this to work. This is the code I have:

Code:

procedure TIWForm1.Btn1AsyncClick(Sender: TObject; EventParams: TStringList);
var
  PngImage: TPngImage;
  s: string;
begin
  PngImage := TPngImage.Create;
  try
    PngImage.LoadFromFile('Tick.png');
    IWImageUtils.GraphicToBase64Str(PngImage, s);
    IWCanvas1.LoadFromDataUrl(s);
  finally
    PngImage.Free;
  end;
end;

The file is definitely getting loaded into the PngImage. I can view the contents of the string s and it starts

data:image/png;base64,iVBORw0KG...

There are no exceptions but the canvas remains blank.

I see the IWCanvas has an OnDataURLReceived event and I note that this event does not fire.

Can you help please?

Thank you.

[MJS@mjs.us]

I haven't used TIWCanvas (I use a <canvas> tag in a template instead) but I get the below error when I try to get a png to draw using a TIWCanvas:

(index):147  Uncaught TypeError: IW.DOM.dataUrlToCanvas is not a function
    at Initialize ((index):147:83)
    at HTMLDocument.<anonymous> ((index):612:23)
Initialize @ (index):147
(anonymous) @ (index):612

[Alexandre Machado]

Please download and install the file contained inside this zip file (should replace all instances of IWData.res files that you have in your IW installation directory - you may have multiple depending on number of IDEs and targets 32/64 bits).

This is a patch while a new version isn't available. It should fix the error


  IWData.zip (Size: 343.22 KB / Downloads: 3)

[troberts]

It's working now Alexandre. Thanks so much for your help!

[jason2080m]

Thanks for sharing