Stretch (or something similar) in UniCanvas

[likemike]

Hello!

I use UnimCanvas1.LoadFromFile('xyz.jpg'); to load an image into my UnimCanvas. 

Now I'm searching for something like a "Stretch-Property", because the images don't fit into my canvas (the images have different sizes).

I need to use UnimCanvas (not UnimImage) because I want the user to write something on the image.

 

Regards

Mike

[likemike]

Nobody has an idea? 🙏

[Sherzod]

29 minutes ago, likemike said:

Nobody has an idea? 🙏

Hello,

Try this approach.

1. UnimCanvas -> ClientEvents -> UniEvents ->

function beforeInit(sender, config)
{
   sender._drawImg = function(imgSrc) {
        var img = new Image();
        img.onload = function() {
            sender._cc_.drawImage(img, 0, 0, sender._c_.width, sender._c_.height);
        };
        img.src = imgSrc;
    }
}

2. Usage:

procedure TMainmForm.UnimButton1Click(Sender: TObject);
begin
  UnimCanvas1.JSInterface.JSCall('_drawImg', ['files/nature.jpg']);
end;

 

[likemike]

Hello!

That works great. Only problem left: the image is not stretched proportional. Is there any trick for that?

Regards

Mike

[Sherzod]

2 hours ago, likemike said:

Only problem left: the image is not stretched proportional. Is there any trick for that?

Hello,

This is another case. 

You can analyze these properties:

sender._c_.width, sender._c_.height

 

[likemike]

Hello!

I've solved it, but it was hard work. The problem is, that you need to read the Exif header of the picture to get the info, if the picture is rotated by 90° or 270°. In this case height and width must be changed. If someone is interested in the solution, please contact me on PM.

Regards

Mike

[likemike]

Hello!

I've one problem with this:

On 8/19/2021 at 7:59 PM, Sherzod said:

Hello,

Try this approach.

1. UnimCanvas -> ClientEvents -> UniEvents ->

function beforeInit(sender, config)
{
   sender._drawImg = function(imgSrc) {
        var img = new Image();
        img.onload = function() {
            sender._cc_.drawImage(img, 0, 0, sender._c_.width, sender._c_.height);
        };
        img.src = imgSrc;
    }
}

2. Usage:

procedure TMainmForm.UnimButton1Click(Sender: TObject);
begin
  UnimCanvas1.JSInterface.JSCall('_drawImg', ['files/nature.jpg']);
end;

 

If the JPG was changed, the next call always show the original JPG (because it's loaded from the browser cache) - even if I try to open a complete different images.
So my question is: how can I force the browser to load the JPG without using the cache? (there was another question in this forum with the solution to add a timestamp behind the pictures name. But I have to preserve the filenames!)

Thanks in advance

Mike

[Sherzod]

2 hours ago, likemike said:

But I have to preserve the filenames!)

Hello,

2 hours ago, likemike said:

there was another question in this forum with the solution to add a timestamp behind the pictures name...

So, does the file name change?

Can you please explain in more detail? 

[likemike]

OK - I try it:

I have a problem with images, which were changed by drawing on it and then saved.

When I want to open the changed image again, it shows the cached one (which is the original one).

As described here: 

 

Andyhill has recommended to change the filename of the image after editing. This works, but I don't want to change the name of the image.

So I need a trick to force the browser to reload the image (and not not to use the cached one).

[Sherzod]

8 minutes ago, likemike said:

Andyhill has recommended to change the filename of the image after editing. This works, but I don't want to change the name of the image.

Here the filename does not change... Just adds a parameter at the end, but you have to do it in code.

Or try to use this approach (In MainForm.Script for example):

https://t.me/uniguidevelopers/6

[likemike]

Thank you, but that makes no difference. The canvas always shows the old picture. Even a restart of the service don't change anything.

Only when I open another picture, the picture in the cache is replaced. 

[andyhill]

Fool browser cache

DateTimeToString(ds, 'yyyymmddhhmmss', Now());

images/'+ClientImageName+'?'+ds

[likemike]

Thanks a lot - it's a dirty trick, but it works..