如何解决JS 客户端 Exif 方向:旋转和镜像 JPEG 图像?

github 项目JavaScript-Load-Image为 EXIF 方向问题提供了完整的解决方案,为所有 8 个 exif 方向正确旋转/镜像图像。见javascript
exif方向在线demo

图像被绘制到 HTML5 画布上。它的正确渲染是在js/load-image-
orientation.js中
通过canvas操作实现的。

希望这可以节省其他人一些时间,并向搜索引擎介绍这个开源 gem :)

解决方法

数码相机照片通常保存为带有 EXIF“方向”标签的
JPEG。为了正确显示,图像需要根据设置的方向进行旋转/镜像,但浏览器会忽略此信息来呈现图像。即使在大型商业网络应用程序中,对 EXIF
方向的支持也可能参差不齐1。 同一来源还对 JPEG 可以具有的 8 种不同方向 进行了很好的总结:

EXIF 方向总结

示例图像可在4处获得。

问题是如何在客户端旋转/镜像图像,以便正确显示并在必要时进行进一步处理?

有 JS 库可用于解析 EXIF 数据,包括方向属性2。Flickr
注意到解析大图像时可能出现的性能问题,需要使用 webworkers
3

控制台工具可以正确地重新定位图像5。解决问题的 PHP
脚本在6可用