如何在 FireMonkey TWebBrowser 中旋轉照片

Question

我剛剛在 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>

Answer 1

我猜你的目標平台是 Windows。 TWebBrowser將基於 IE 的 web 瀏覽器控件包裝在 Windows 上，默認情況下以 IE7 標准模式顯示頁面。 此模式不支持 CSS 轉換。 您有多種選擇來解決這個問題。

選項 1：使用已棄用`-ms-filter` CSS 屬性

-ms-filer或filter是 Microsoft CSS 擴展，用於將圖形過濾器集合應用於 object。 它還支持旋轉：

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

選項 2：通過注冊表強制 Egde 標准模式

這也是TWebBrowser文檔鼓勵您在 Windows 平台上做的事情。 您基本上需要在HKEY_CURRENT_USER\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION下手動或以編程方式將應用程序的 EXE 名稱登記為定義應用程序兼容模式的DWORD值。 11001 ( $2AF9 ) 用於 IE11 邊緣模式。 有關更多值，請參閱瀏覽器仿真。 此設置將影響應用程序中任何 web 瀏覽器控件中加載的所有頁面。

選項 3：使用`x-ua-compatible` header 指定 legacy 模式

您應該能夠通過 HTML 中的<meta>標簽注入x-ua-compatible header 來實現與選項 2 相同的效果：

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

有關詳細信息，請參閱指定舊文檔模式。

以上均適用於 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>

如何在 FireMonkey TWebBrowser 中旋轉照片

問題描述

1 個解決方案

解決方案1
3 2020-07-22 22:45:42

選項 1：使用已棄用`-ms-filter` CSS 屬性

選項 2：通過注冊表強制 Egde 標准模式

選項 3：使用`x-ua-compatible` header 指定 legacy 模式

如何在 FireMonkey TWebBrowser 中旋轉照片

問題描述

1 個解決方案

解決方案1 3 2020-07-22 22:45:42

選項 1：使用已棄用-ms-filter CSS 屬性

選項 2：通過注冊表強制 Egde 標准模式

選項 3：使用x-ua-compatible header 指定 legacy 模式

解決方案1
3 2020-07-22 22:45:42

選項 1：使用已棄用`-ms-filter` CSS 屬性

選項 3：使用`x-ua-compatible` header 指定 legacy 模式