在我的测试代码中显示图像时
我正在处理不同设备的覆盖图像方向。在我的测试代码中，“无”的设置似乎从未生效。图像总是显示出来自图像的EXIF方向数据正在考虑的位置。
逐步尝试找到确实有效的东西时，我找到了一个示例（ https://developer.mozilla.mozilla.org/en-us/docs/web/css/css/image-orientation ） MDN文档证明了此功能有效。该代码出现在下面。当我转到MDN页面并使用“从图像”和“无”之间切换到预期的“无图像”之间。 （当不选择未选择时，鸟图像颠倒了。）
我将上面的示例页面复制代码中的代码中的一页上的页面上的一个页面上，这似乎对我不起作用。无论我是选择“无”或“从图像”，图像始终显示相同的图像。 （我正在使用相同的浏览器。）在我的测试代码中，我确实链接到与MDN示例相同的图像，以确保保存本地副本不会以任何方式影响它。我还确认了打开单个按钮时，图像 - 取向设置确实在DOM元素中被覆盖，但图像显示不会更改。这是一个codepen（演示问题。 （它包含与下面发布的代码相同的代码。）
我在Windows上的Chrome（101），Opera（86）和Edge（101）上进行了测试，以及Mac上的Safari（15.5），我在所有方面都获得了相同的结果浏览器。
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<style>
body {
padding: 0;
margin: 0;
}
svg:not(:root) {
display: block;
}
.playable-code {
background-color: #f4f7f8;
border: none;
border-left: 6px solid #558abb;
border-width: medium medium medium 6px;
color: #4d4e53;
height: 100px;
width: 90%;
padding: 10px 10px 0;
}
.playable-canvas {
border: 1px solid #4d4e53;
border-radius: 2px;
}
.playable-buttons {
text-align: right;
width: 90%;
padding: 5px 10px 5px 26px;
}
</style>
<style>
#image {
image-orientation: from-image;
/* Can be changed in the live sample */
}
img {
margin: .5rem 0;
}
label {
font-family: monospace;
}
</style>
<title>image-orientation - orienting_image_from_image_data - code sample</title>
</head>
<body>
<img id="image" src="https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/CSS/image-orientation/oriole.jpg" alt="Orientation taken from the image" style="image-orientation: none;">
<div>
<input type="radio" id="from-image" name="orientation" value="from-image" checked="">
<label for="from-image">from-image</label>
</div>
<div>
<input type="radio" id="none" name="orientation" value="none">
<label for="none">none</label>
</div>
<script>
document.addEventListener('change', evt => {
document.getElementById("image").style.imageOrientation = evt.target.value;
});
</script>
</body>
</html>
I'm working with overriding image-orientation from different devices. In my test code the setting of 'none' never seems to take effect. The images always display as if the EXIF orientation data from the image is being factored in.
Stepping back to try and find something that does work, I located an example (https://developer.mozilla.org/en-US/docs/Web/CSS/image-orientation) from the MDN docs that demonstrates this functionality working. The code appears below. When I go to the MDN page and use the radio button to toggle between 'from-image' and 'none' it works as expected. (The bird image appears upside down when none is selected.)
I copied the code from the sample page above into a page on my local machine and it doesn't seem to work for me. Regardless of whether I select 'none' or 'from-image' the image always displays the same. (I'm using the same browser.) In my test code, I do link to the same image as the MDN example, to ensure that saving a local copy doesn't effect it in any way. I've also confirmed when the radio button is toggled the image-orientation setting does get overridden in the DOM element but the image display does not change. Here is a codepen (https://codepen.io/kwright402/pen/RwQxGKG) that demonstrates the issue. (It contains the same code as posted below.)
I've tested on Chrome (101), Opera (86) and Edge (101) all on Windows as well as Safari (15.5) on Mac and I get the same results across all the browsers.
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<style>
body {
padding: 0;
margin: 0;
}
svg:not(:root) {
display: block;
}
.playable-code {
background-color: #f4f7f8;
border: none;
border-left: 6px solid #558abb;
border-width: medium medium medium 6px;
color: #4d4e53;
height: 100px;
width: 90%;
padding: 10px 10px 0;
}
.playable-canvas {
border: 1px solid #4d4e53;
border-radius: 2px;
}
.playable-buttons {
text-align: right;
width: 90%;
padding: 5px 10px 5px 26px;
}
</style>
<style>
#image {
image-orientation: from-image;
/* Can be changed in the live sample */
}
img {
margin: .5rem 0;
}
label {
font-family: monospace;
}
</style>
<title>image-orientation - orienting_image_from_image_data - code sample</title>
</head>
<body>
<img id="image" src="https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/CSS/image-orientation/oriole.jpg" alt="Orientation taken from the image" style="image-orientation: none;">
<div>
<input type="radio" id="from-image" name="orientation" value="from-image" checked="">
<label for="from-image">from-image</label>
</div>
<div>
<input type="radio" id="none" name="orientation" value="none">
<label for="none">none</label>
</div>
<script>
document.addEventListener('change', evt => {
document.getElementById("image").style.imageOrientation = evt.target.value;
});
</script>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
一段时间以来，我在同一问题上敲了个头后，我发现这是一个问题。当我在本地测试时，它失败了。仅当我将图像定向标签应用于同一域上的图像时，它才起作用。这不是解决方案，但至少可以解释问题。
讨论帮助我弄清楚了问题：
link
After banging my head on this same issue for a while, I figure out it was a CORS issue. It failed when I tested locally. It only worked when I applied image-orientation tag to image on same domain. It's not a solution, but it at least explains the issue.
This discussion helped me figure out issue:
Link