How to flip or rotate images?

WEB TMS WEB Core
1

I'm working with some TWebImages and I'd like to know how to rotate them 180 degrees, as well as flip them about the horizontal and/or vertical axis.

There's code to do it that uses the .Picture.Bitmap property, but Bitmap isn't defined here. Maybe it is, but the compiler says it's not.

2

There is no built-in function in the Pascal class, but you could add a transform to the IMG element access via WebImageControl.ElementHandle as explained in the article here:

1 Like
3

You can also use CSS if you don't want to implement the JS calls mentioned above.
You could define some styles with what you need, and apply it to some elements as needed (it can be applied not only to images).

Ex:

<html>
<head>
<style>
  .Rotate90 { transform: rotate(90deg); }
  .Rotate20 { transform: rotate(20deg); }
  .RotateAndFlip { transform: rotate(90deg) scaleX(-1); }
  .FlipVertical { transform: scaleY(-1); }
  .FlipHorizontal { transform: scaleX(-1); }
</style>
</head>
<body>
...
<img src="MyImage.png" class="Rotate90">
<p class="Rotate20"> ... </p>
</body>
</html>
4

hmmm ... so how would that work with a TWebImage?

I've got a few of them on the form, and the user clicks a button and it loads one, then the next, then the next, and so forth.

Are there any properties I can set or clear on the component before setting the URL property to have the image rotated 180 degrees so it's upside-down if that's what I want? I don't know what happens if you change some of those properties at run-time, like ElementClassName or ElementID.

As an aside, what's the best way to clear an image in a TWebImage when the user resets/clears the form? In VCL, you'd say xyz.Picture.Bitmap.Free, but that doesn't work here. Setting URL := '' leaves something in the top-left corner of the image area, so there's something left over.

5
  1. Set ElementClassName to for example FlipVertical
  2. A browser IMG image element with no URL displays always with a small no-image icon. This is the default browser behavior. You could set the image as small transparent PNG for example with:

WebImageControl.URL := 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';

6

So I'd declare Style tags as shown above, then put them into the ElementClassName property when i reload the image? If I want nothing, then I'd clear that property?

Where's the best place to put those Style tags? Into a component somewhere? Or the index.html file? Or somewhere else?

7

Yes, you set or clear ElementClassName
and the HTML template is a good place to add the CSS style definition to it.

1 Like
8

That works! Very cool. Just editing the index.html file in the IDE is a problem. (See the other post I made.)