如何在 FireMonkey TWebBrowser 中旋转照片
[英]How to rotate a photo in FireMonkey TWebBrowser
问题描述
I just tried FMX TWebBrowser in Delphi 10.3.3.
我刚刚在 Delphi 10.3.3 中尝试了 FMX TWebBrowser。 I could not rotate a photo in img tag.我无法旋转 img 标签中的照片。 The following page is working in Google Chrome.以下页面在 Google Chrome 中运行。 But it is not working in FireMonkey TWebBrowser of Delphi 10.3.3.但它在 Delphi 10.3.3 的 FireMonkey TWebBrowser 中不起作用。 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>
1 个解决方案
解决方案1
3 2020-07-22 22:45:42
I guess your target platform is Windows.我猜你的目标平台是 Windows。 TWebBrowser wraps IE based web browser control on Windows which displays pages in IE7 standard mode by default. TWebBrowser将基于 IE 的 web 浏览器控件包装在 Windows 上，默认情况下以 IE7 标准模式显示页面。 This mode doesn't support CSS transformations.此模式不支持 CSS 转换。 You have multiple options to workaround that.您有多种选择来解决这个问题。
Option 1: Use deprecated -ms-filter CSS property选项 1：使用已弃用-ms-filter CSS 属性
-ms-filer or filter is Microsoft CSS extension to apply collection of graphic filters to an object. -ms-filer或filter是 Microsoft CSS 扩展，用于将图形过滤器集合应用于 object。 It also supports rotation:它还支持旋转：
imgX.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
Option 2: Force Egde standard mode via registry选项 2：通过注册表强制 Egde 标准模式
This is also what TWebBrowser documentation encourages you to do on Windows platform.这也是TWebBrowser文档鼓励您在 Windows 平台上做的事情。 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.您基本上需要在HKEY_CURRENT_USER\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION下手动或以编程方式将应用程序的 EXE 名称登记为定义应用程序兼容模式的DWORD值。 11001 ( $2AF9 ) is for IE11 edge mode. 11001 ( $2AF9 ) 用于 IE11 边缘模式。 See Browser Emulation for further values.有关更多值，请参阅浏览器仿真。 This setting will affect all pages loaded in any web browser control within your application.此设置将影响应用程序中任何 web 浏览器控件中加载的所有页面。
Option 3: Use x-ua-compatible header to specify legacy mode选项 3：使用x-ua-compatible header 指定 legacy 模式
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:您应该能够通过 HTML 中的<meta>标签注入x-ua-compatible header 来实现与选项 2 相同的效果：
<!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.以上均适用于 Windows 平台。 Keep that in mind when picking from the options.从选项中选择时请记住这一点。 Option 1 most likely won't work on other platforms.选项 1 很可能不适用于其他平台。
While you're at it consider also separating JavaScript from CSS by leveraging CSS classes:当您考虑使用 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.