如何使用 CSS/Javascript 防止 iOS 上 HTML 上的自动旋转图像

2024-04-02

我正在创建一个照片网站 - 我上传了一张自己的照片,但实际上方向不正确(图像逆时针旋转 90 度)。我从我的 iPhone 上传了这张图片,显然 iPhone 是故意以这种方式存储的。

在我的网站上,HTML 页面呈现了一个 JSON 对象,其中包含照片的 URL 以及图像尺寸。我正在使用 jQuery mobile - 页面加载时我在页面上放置了一个链接,当您单击照片时,它会以弹出窗口的形式显示照片。弹出窗口呈现一个<img>标签的尺寸足够小以适合当前视口宽度/高度内的图像。它使用我之前提到的 JSON 计算维度,结果来自$(window).width() and $(window).height().

在桌面上 - 照片以错误的方向正确显示(因为这就是照片的实际存储方式)。

在 iPad 和 iPhone 上 - 照片会自动旋转,因此照片方向正确,但尺寸全部错误,因此照片全部被拉伸和扭曲。

我想了解以下信息:

  1. 这是 iOS 或其他设备上浏览器的一项众所周知的功能吗?
  2. 有没有办法使用 CSS 或 Javascript 禁用此功能?
  3. 有没有办法检测到它的发生并纠正尺寸<img>标签?我不介意浏览器纠正照片的方向,我只是希望尺寸正确。

EDITS

使标题更加以问题的形式 - 也将问题重新表述为更直接

更多编辑

这是一个 JS Fiddle 示例:http://jsfiddle.net/5JKgn/ http://jsfiddle.net/5JKgn/

如果您在台式计算机上单击该链接,弹出窗口会显示图像方向不正确。如果您在 iPhone 或 iPad 上单击该链接,弹出窗口会显示方向正确的图像,但尺寸错误,因此照片会被拉伸。

在实际场景中,JSON 由 PHP 代码呈现,PHP 代码可以读取图像并根据其使用的内容输出宽度高度getimagesize()


好的,我会尝试回答这个问题:

  1. 是的,iOS 故意将显示方向存储在 EXIF 数据中(包括分辨率、快门、GPS 等),但将图像数据保存在设备方向中。
    有关 EXIF 的更多信息,请参阅维基百科 http://en.wikipedia.org/wiki/Exchangeable_image_file_format.

  2. 从来没听说过。

  3. 是的,您应该能够访问 EXIF 数据并确定方向和尺寸。

编号。 3 需要更多解释:

你可以使用像这样的库this one http://www.nihilogic.dk/labs/exif/从 javascript 访问 EXIF 数据(包括 jQuery 插件)。 方向标签定义为:0x0112 : "Orientation"并存储为数字。

使用该信息您可以确定方向:

Value | Orientation
------|----------------------
1     | horizontal (normal)
2     | flip horizontal
3     | rotate 180°*
4     | flip vertical
5     | transpose
6     | rotate 90°*
7     | transverse
8     | rotate 270°*
* rotation is counter clockwise

这应该使您至少能够交换宽度/高度<img>如果需要。 请注意,EXIF 数据还包括宽度和高度,因此如果它们与您认为的不同,也可以帮助识别旋转问题。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 CSS/Javascript 防止 iOS 上 HTML 上的自动旋转图像 的相关文章

  • 了解执行模型和事件循环

    我读过很多关于JavaScript单线程执行模型 事件循环和事件队列的文章 但有一件事尚不清楚 我创建了一个小提琴来说明我的问题 http jsfiddle net yzpmf67f http jsfiddle net yzpmf67f
  • angular.copy() 和 JSON.parse(JSON.stringify()) 之间的区别?

    有人可以解释 angular copy 和 JSON parse JSON stringify 之间的区别吗 有吗 您会推荐使用什么 angular fromJson angular toJson 与 JSON parse JSON str
  • JavaScript 中的 Promise.all:如何获取所有 Promise 的解析值?

    我编写了以下node js文件 var csv require csv parser var fs require fs var Promise require bluebird var filename devices csv var d
  • Chart.js 没有显示在我的视图中

    我有一个使用 angular js 运行的应用程序 我的视图之一应该加载图表 我正在使用 Chart js 但由于某种原因它不起作用 并且我的控制台上没有显示错误 这是我创建图表的函数 scope writeBatteryChart fun
  • 在 AngularJS 中覆盖运行时的依赖关系

    我有一个服务叫 doggedHttp 它公开了与 http 现在我想创建一个 doggedResource服务是有角度的 resource服务之上 doggedHttp代替 http 换句话说我想注入 doggedHttp as the h
  • GeoJSON 要素坐标未显示在 OpenLayers 地图上

    我正在尝试显示一个GeoJSON地图上的多边形 我使用了 OpenLayers 提供的示例以及以下数据 但仅显示第二个多边形 var geojsonObject type FeatureCollection crs type name fe
  • 按自定义字母顺序对数组进行排序

    如何对这样的数组进行排序 apple very auto tom tim violet 要按 v a t x b 等排序 不按字母顺序 violet very auto tom tim 在脚本中 我会做这样的事情 myArray sort
  • 如何获取调用函数的“this”值?

    如果我有一个这样的函数 function foo this console log this function bar bar prototype func function foo this var test new bar test f
  • 如何最好地实现多个重叠元素的翻转和推出事件?

    Problem 我正在开发一个网站 其中有一个 拨号盘 显示代表伞式公司不同部门的多个选项卡 目前我已经用 HTML CSS 准备好了一切 每个选项卡的定位 内圈处于较高位置z index因为选项卡在滚动时需要向外动画 我可以实现这部分 选
  • 在 NPM 上捆绑并发布客户端 Web 代码

    我制作了一个 JavaScript 文件 假设它的内容是这样的 let myCoolAlert str gt alert str in a different js file SO doesn t allow you to cross fi
  • 将服务连接到现有的流星帐户

    我正在设置一个流星应用程序 其中涉及使用用户名和密码进行注册 然后希望将该帐户与 Facebook 和 Twitter 连接起来 我只需使用帐户包即可轻松启动并运行第一部分 但是当我有一个登录用户调用 Meteor loginWithFac
  • Typeahead.js 干扰 Bootstrap 输入组

    如何防止 Typeahead js 拆分我的 Twitter Bootstrap 3 输入组 每当我将 Typeahead javascript 指向属于输入组一部分的文本区域时 连接的文本区域和提交按钮就会停止连接 这只是 Typeahe
  • 检查 href 中是否存在 jQuery 中的查询字符串

    我目前有一段 jQuery 用于附加带有一些位置信息的 URL jQuery a attr href function return this href location 123 abc 我的问题是大多数链接都有一个 其中使用上面的 就可以
  • 将 javascript 变量发送到服务器端 ASP .NET

    我需要在回发时将 JavaScript 数据传递到服务器端 Exvar jsVariableToPass new Object jsVariableToPass key1 value1 jsVariableToPass key2 value
  • 如何在变量名中使用变量

    所以我正在使用这样的 json 变量 opponentInvData item1 它包含项目 1 到 6 我需要动态访问不同的项目并将它们设置为空 itemNum 是我需要访问的特定项目 我正在尝试使用 eval 函数 var itemNu
  • 底部带有三角形的蒙版图像

    我正在尝试找出如何最好地掩盖具有像这样的角度形状的 div 如果在这种情况下顶部 div 将是背景图像 并且两个 div 都是 100 宽度 我看过很多关于如何用圆形遮罩图像的教程 但没有关于如何遮罩红色区域等 div 边框的教程 我知道一
  • 使用后代选择器的响应式网站

    我试图使用媒体查询使我的网站响应 但是当我在代码的某些部分使用后代选择器时 页面没有响应 当我使用此代码时 该页面是响应式的 div1 float left width 20 height 200px background color re
  • 条件顺序仅在 init AngularJS 上执行

    如何在视图初始化时仅运行 orderBy 过滤器一次 我不希望我的列表在运行时被重新排序 li li 使用 orderBy 作为控制器中的过滤器 app controller DemoCtrl scope filter function s
  • addEventListener keydown 不起作用

    我在互联网上找到了一些基本的 Pong 代码 并尝试添加按键 代码在这里 http cssdeck com labs ping pong game tutorial with html5 canvas and sounds http css
  • Javascript:修改原型不会影响现有实例[重复]

    这个问题在这里已经有答案了 我创建了原型的 2 个实例 更改了原型中的函数 更改反映在两个实例中 很棒 但是 当我通过删除该函数来修改原型时 该函数对于现有实例仍然存在 function A this name cool A prototy

随机推荐