数码相机照片通常保存为带有 EXIF“方向”标签的 JPEG。为了正确显示,图像需要根据设置的方向进行旋转/镜像,但浏览器会忽略此信息来呈现图像。即使在大型商业网络应用程序中,对 EXIF 方向的支持也可能参差不齐1。 同一来源还对 JPEG 可以具有的 8 种不同方向 进行了很好的总结:
示例图像可在4处获得。
问题是如何在客户端旋转/镜像图像,以便正确显示并在必要时进行进一步处理?
有 JS 库可用于解析 EXIF 数据,包括方向属性2。Flickr 注意到解析大图像时可能出现的性能问题,需要使用 webworkers 3。
控制台工具可以正确地重新定位图像5。解决问题的 PHP 脚本在6可用
github 项目JavaScript-Load-Image为 EXIF 方向问题提供了完整的解决方案,为所有 8 个 exif 方向正确旋转/镜像图像。见javascript exif方向在线demo
图像被绘制到 HTML5 画布上。它的正确渲染是在js/load-image- orientation.js中通过canvas操作实现的。
希望这可以节省其他人一些时间,并向搜索引擎介绍这个开源 gem :)