Atozed Forums
Correct way to use IWCanvas - Printable Version

+- Atozed Forums (https://www.atozed.com/forums)
+-- Forum: Atozed Software (https://www.atozed.com/forums/forum-1.html)
+--- Forum: IntraWeb (https://www.atozed.com/forums/forum-3.html)
+---- Forum: English (https://www.atozed.com/forums/forum-16.html)
+----- Forum: IntraWeb General Discussion (https://www.atozed.com/forums/forum-4.html)
+----- Thread: Correct way to use IWCanvas (/thread-3401.html)

Correct way to use IWCanvas - troberts - 08-07-2023

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?

RE: Correct way to use IWCanvas - Alexandre Machado - 08-07-2023

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.

RE: Correct way to use IWCanvas - troberts - 08-09-2023

(08-07-2023, 11:41 PM)Alexandre Machado Wrote: 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.

RE: Correct way to use IWCanvas - MJS@mjs.us - 08-10-2023

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

RE: Correct way to use IWCanvas - Alexandre Machado - 08-11-2023

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


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

RE: Correct way to use IWCanvas - troberts - 08-14-2023

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

RE: Correct way to use IWCanvas - jason2080m - 08-17-2023

Thanks for sharing