# exif-orientation

**Repository Path**: hapijs/exif-orientation

## Basic Information

- **Project Name**: exif-orientation
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-05-16
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: image-processing

**Tags**: None

## README

[查看图片示例](https://hapijs.gitee.io/exif-orientation/example.html)
 
[测试图片示例](https://hapijs.gitee.io/exif-orientation/)

了解exif [百度百科](https://baike.baidu.com/item/Exif/422825)

![Exif](images/baike.baidu.com_item_Exif_422825.png)

q: 什么情况下会出现图片旋转的问题？

![相机图片](images/camera.png)

a: Orientation值不为1且浏览器不支持**EXIF-Orientation**

exif的图片方向（Orientation）有：

| 取值 | 描述|
| :----: | :----: |
| 1 | top-left |
| 2 | top-right |
| 3 | bottom-right |
| 4 | bottom-left |
| 5 | left-top |
| 6 | right-top |
| 7 | right-bottom |
| 8 | left-bottom |

注释：
描述（拍摄照片时数码相机上部对应的方位-左边对应的方位，平面4个方向镜像4个方向） 



如果浏览器支持**EXIF-Orientation**，会按拍照时相机左上顶点（红点位置）至右下顶点渲染，所以能看到正确的图片。
不支持则会出现旋转的情况。

q: 如何解决图片旋转的问题
a: 使用图片处理库按照图片exif信息（旋转之类的操作）重新生成图片（新的图片已去掉exif相关信息）。

前端的实现思路
1. 如果浏览器支持**EXIF-Orientation**，直接绘制到canvas并重新生成图片
2. 如果浏览器不支持**EXIF-Orientation**，需要根据Orientation取值进行旋转绘制到canvas并重新生成图片

前端用到的工具库
- modernizr exiforientation 用于判断浏览器是否支持**EXIF-Orientation**
- ExifReader 用于获取Orientation取值

# 相关链接
- [ImpulseAdventure - JPEG / Exif Orientation and Rotation](https://www.impulseadventure.com/photo/exif-orientation.html)
- [exiforientation-setclasses](https://modernizr.com/download?exiforientation-setclasses)
- [ExifReader](https://github.com/mattiasw/ExifReader)
- [take-and-manipulate-photo-with-web-page](https://chariotsolutions.com/blog/post/take-and-manipulate-photo-with-web-page/)