問題描述
數碼相機照片通常以帶有 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 :)
這篇關于JS 客戶端 Exif 方向:旋轉和鏡像 JPEG 圖像的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！