Javascript 如何在FireMonkey TWebBrowser中旋转照片_Javascript_Image_Delphi_Firemonkey_Twebbrowser

Javascript 如何在FireMonkey TWebBrowser中旋转照片

javascript image delphi

Javascript 如何在FireMonkey TWebBrowser中旋转照片,javascript,image,delphi,firemonkey,twebbrowser,Javascript,Image,Delphi,Firemonkey,Twebbrowser,我刚刚在Delphi 10.3.3中试用了FMX TWebBrowser。我无法在img标签中旋转照片。下面的页面在谷歌浏览器中运行。但它在Delphi10.3.3的FireMonkey TWebBrowser中不起作用。怎么了？请有人帮帮我 <!DOCTYPE html> <html> <head> <style> img { display: block; width: 300px; height:

我刚刚在Delphi 10.3.3中试用了FMX TWebBrowser。我无法在img标签中旋转照片。下面的页面在谷歌浏览器中运行。但它在Delphi10.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>


img{
显示：块；
宽度：300px；
高度：自动；
}
旋转90度


函数rotate（）{
var imgX=document.getElementById（“theID”）；
imgX.style.transform=“旋转（90度）”；
imgX.style.display=“块”；
}

我想你的目标平台是Windows

TWebBrowser

在默认情况下以IE7标准模式显示页面的Windows上包装基于IE的web浏览器控件。此模式不支持CSS转换。你有多种选择来解决这个问题

选项1：使用不推荐的

-ms过滤器CSS属性
或filter
是Microsoft CSS扩展，用于将图形过滤器集合应用于对象。它还支持旋转：
imgX.style.filter=“progid:DXImageTransform.Microsoft.BasicImage（rotation=1）”；

选项2：通过注册表强制Egde标准模式
这也是鼓励您在Windows平台上执行的操作。基本上，您需要在HKEY\u CURRENT\u USER\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE\u BROWSER\u EMULATION
下以手动或编程方式将应用程序的EXE名称登记为定义应用程序兼容性模式的DWORD
值<代码>11001（$2AF9
）用于IE11边缘模式。有关更多值，请参阅。此设置将影响应用程序中任何web浏览器控件中加载的所有页面
选项3：使用x-ua-compatible标题指定传统模式
通过在HTML中通过
标记注入x-ua-compatible
标题，您应该能够实现与选项2中相同的效果：

…

有关更多信息，请参阅

所有这些都适用于Windows平台。从选项中选择时请记住这一点。选项1很可能在其他平台上不起作用
当你在考虑的时候，也可以通过利用CSS类来分离JavaScript和CSS：

img{
显示：块；
宽度：300px；
高度：自动；
}
.轮换{
变换：旋转（90度）；
}
…
函数rotate（）{
var imgX=document.getElementById（“theID”）；
imgX.classList.toggle（“旋转”）；
}