How to rotate a photo in FireMonkey TWebBrowser

user_13977679 0
Viewed 190

I just tried FMX TWebBrowser in Delphi 10.3.3. I could not rotate a photo in img tag. The following page is working in Google Chrome. But it is not working in FireMonkey TWebBrowser of Delphi 10.3.3. What is wrong? Please someone help me!

<!DOCTYPE html>
<html>
<head>
<style>
    img {
      display: block;
      width: 300px;
      height: auto;
   }
</style>
</head>
<body>

<button onclick="rotate();">Rotate 90 degrees</button>
<br />
<img src="20190228-1.JPG" id="theID" />

<script>
    function rotate() {
      var imgX=document.getElementById("theID");
      imgX.style.transform = "rotate(90deg)";
      imgX.style.display = "block";
    }
</script>

</body>
</html>
twebbrowser firemonkey delphi image javascript
1 Answers

I guess your target platform is Windows. TWebBrowser wraps IE based web browser control on Windows which displays pages in IE7 standard mode by default. This mode doesn't support CSS transformations. You have multiple options to workaround that.

Option 1: Use deprecated -ms-filter CSS property

-ms-filer or filter is Microsoft CSS extension to apply collection of graphic filters to an object. It also supports rotation:

imgX.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";

Option 2: Force Egde standard mode via registry

This is also what TWebBrowser documentation encourages you to do on Windows platform. You basically need to enlist your application's EXE name under HKEY_CURRENT_USER\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION either manually or programmatically as DWORD value that defines compatibility mode for your application. 11001 ($2AF9) is for IE11 edge mode. See Browser Emulation for further values. This setting will affect all pages loaded in any web browser control within your application.

Option 3: Use x-ua-compatible header to specify legacy mode

You should be able to achieve the same effect as in option 2 by injecting x-ua-compatible header via <meta> tag in your HTML:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  …

See Specifying legacy document modes for more information.

All of the above applies to Windows platform. Keep that in mind when picking from the options. Option 1 most likely won't work on other platforms.

While you're at it consider also separating JavaScript from CSS by leveraging CSS classes:

<style>
img {
  display: block;
  width: 300px;
  height: auto;
}

.rotated {
  transform: rotate(90deg);
}
</style>

…

<script>
function rotate() {
  var imgX = document.getElementById("theID");
  imgX.classList.toggle("rotated");
}
</script>
user_115621880
Related