JS客户端Exif方向：旋转和镜像JPEG图像 [英] JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images

问题描述

数码相机照片通常以JPEG格式保存，并带有EXIF方向标签。要正确显示，需要根据设置的方向旋转/镜像图像，但浏览器会忽略渲染图像的信息。即使在大型商业网络应用程序中，对EXIF方向的支持也可能不稳定。

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

有可用于解析EXIF数据的JS库，包括orientation属性 2 。 Flickr在解析大图像时注意到可能的性能问题，需要使用网络工作者 3 。

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

解决方案

github项目 JavaScript-Load-Image 提供EXIF方向问题的完整解决方案，正确旋转/镜像所有8个exif方向的图像。请参阅 javascript exif orientation 的在线演示

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

希望这可以节省其他人一些时间，并教导搜索引擎关于这个开源宝石：）

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 commerical 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 :)

这篇关于JS客户端Exif方向：旋转和镜像JPEG图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！