JS 客户端 Exif 方向:旋转和镜像 JPEG 图像

数码相机照片通常以带有 EXIF方向"标签的 JPEG 格式保存.为了正确显示，图像需要根据设置的方向进行旋转/镜像，但浏览器会忽略此信息来呈现图像.即使在大型商业网络应用程序中，对 EXIF 方向的支持也可能参差不齐 .

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

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

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

解决方案

github项目JavaScript-Load-Image 为 EXIF 方向问题提供完整的解决方案，正确旋转/镜像所有 8 个 exif 方向的图像.查看 javascript exif 方向

的在线演示

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

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

Digital camera photos are often saved as JPEG with an EXIF "orientation" tag. To display correctly, images need to be rotated/mirrored depending on which orientation is set, but browsers ignore this information rendering the image. Even in large commercial web apps, support for EXIF orientation can be spotty 1. The same source also provides a nice summary of the 8 different orientations a JPEG can have:

Sample images are available at 4.

The question is how to rotate/mirror the image on the client side so that it displays correctly and can be further processed if necessary?

There are JS libraries available to parse EXIF data, including the orientation attribute 2. Flickr noted possible performance problem when parsing large images, requiring use of webworkers 3.

Console tools can correctly re-orient the images 5. A PHP script solving the problem is available at 6

解决方案

The github project JavaScript-Load-Image provides a complete solution to the EXIF orientation problem, correctly rotating/mirroring images for all 8 exif orientations. See the online demo of javascript exif orientation

The image is drawn onto an HTML5 canvas. Its correct rendering is implemented in js/load-image-orientation.js through canvas operations.

Hope this saves somebody else some time, and teaches the search engines about this open source gem :)