如何在 FireMonkey TWebBrowser 中旋转照片答案

【问题标题】：How to rotate a photo in FireMonkey TWebBrowser如何在 FireMonkey TWebBrowser 中旋转照片
【发布时间】：2020-11-12 10:38:52
【问题描述】：

我刚刚在 Delphi 10.3.3 中尝试了 FMX TWebBrowser。我无法旋转 img 标签中的照片。以下页面在 Google Chrome 中运行。但它在 Delphi 10.3.3 的 FireMonkey TWebBrowser 中不起作用。怎么了？请有人帮助我！

<!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>

【问题讨论】：

标签： javascript image delphi firemonkey twebbrowser

【解决方案1】：

我猜你的目标平台是 Windows。 TWebBrowser 在 Windows 上包装基于 IE 的 Web 浏览器控件，默认情况下以 IE7 标准模式显示页面。此模式不支持 CSS 转换。您有多种解决方法。

选项 1：使用已弃用的 `-ms-filter` CSS 属性

-ms-filer 或 filter 是 Microsoft CSS 扩展，用于将图形过滤器集合应用于对象。它还支持旋转：

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

选项 2：通过注册表强制 Egde 标准模式

这也是TWebBrowser documentation鼓励你在Windows平台上做的事情。您基本上需要手动或以编程方式在HKEY_CURRENT_USER\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION 下登记应用程序的EXE 名称作为定义应用程序兼容模式的DWORD 值。 11001 ($2AF9) 用于 IE11 边缘模式。有关更多值，请参阅Browser Emulation。此设置将影响应用程序内任何 Web 浏览器控件中加载的所有页面。

选项 3：使用 `x-ua-compatible` 标头指定旧模式

您应该能够通过在 HTML 中通过 <meta> 标记注入 x-ua-compatible 标头来实现与选项 2 相同的效果：

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

更多信息请参见Specifying legacy document modes。

以上所有内容均适用于 Windows 平台。从选项中选择时请记住这一点。选项 1 很可能不适用于其他平台。

在您考虑的同时，还可以考虑通过利用 CSS 类将 JavaScript 与 CSS 分开：

<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>

【讨论】：

选项 1：使用已弃用的 -ms-filter CSS 属性

选项 2：通过注册表强制 Egde 标准模式

选项 3：使用 x-ua-compatible 标头指定旧模式

选项 1：使用已弃用的 `-ms-filter` CSS 属性

选项 3：使用 `x-ua-compatible` 标头指定旧模式