相信大家在做项目的时候会遇到在帆布里加入图片时，图片发生90 ,180 的旋转。当时的你肯定时懵逼的，为毛。

其实这就是图片的照片信息搞的鬼。

什么是照片信息

简单来说，Exif信息就是由数码相机在拍摄过程中采集一系列的信息，然后把信息放置在我们熟知的JPEG/TIFF文件的头部，也就是说照片信息信息是镶嵌在JPEG/TIFF图像文件格式内的一组拍摄参数，它就好像是傻瓜相机的日期打印功能一样，只不过照片信息信息所记录的资讯更为详尽和完备Exif。所记录的元数据信息非常丰富，主要包含了以下几类信息：

拍摄日期

摄器材（机身、镜头、闪光灯等

拍摄参数（快门速度、光圈F值、国际标准化组织速度、焦距、测光模式等

图像处理参数（锐化、对比度、饱和度、白平衡等)

图像描述及版权信息

全球（卫星)定位系统定位数据

缩略图

这里面就包含了图片的角度信息，就是说你用手机拍照时是不是倒着拍还是侧着拍，这些都是有记录的。

接下来就是教大家怎么获取图片内的照片信息信息

先给大家看看照片信息信息都存在哪里：(角度就在0x0112)

照片信息信息的地址

//这里的获取照片信息要将图片转数组缓冲对象，这里假设获取了图片的baes64

//步骤一

//base64转数组缓冲对象

base64ToArrayBuffer函数(base64) {

base64=base64.replace(/^data\:([^\；] )\;base64，/gmi，")；

var binary=atob(base64)；

var len=binary.length

var buffer=new ArrayBuffer(len)；

var view=新Uint8Array(缓冲区);

for(var I=0；i leni ) {

视图[I]=二进制。charcodeat(I)；

}

返回缓冲区；

}

//步骤二，Unicode码转字符串

//ArrayBuffer对象统一码码转字符串

函数getStringFromCharCode(dataView，开始，长度){

var str=

var I；

for (i=开始，长度=开始；我长度；i ) {

str=FromCharCode(DataView。getuint 8(I))；

}

返回字符串；

}

//步骤三，获取使用联合图象专家组文件交换格式存储的编码图像文件扩展名图片的照片信息的角度（在ios体现最明显)

函数getOrientation(arrayBuffer) {

var DataView=new DataView(Arraybbuffer)；

可变长度=数据视图.字节长度

变化的方向；

var exifIDCode

var tiffOffset

var firstIFDOffset

var littleEndian

var endianness

var app1Start

var ifdStart

定义变量偏移量；

var I；

//仅处理联合图像专家组图像（从0xFFD8开始)

if(DataView。getuint 8(0)=0xfF DataView。getuint 8(1)=0xd 8){

offset=2；

而(偏移长度){

if(DataView。GetUINT8(偏移量)=0xfF DataView。GetUINT8(偏移量1)=0xe 1){

app1Start=偏移

打破；

}

偏移；

}

}

if (app1Start) {

ex FID code=app 1 start 4；

tiffOffset=app1Start 10

if(GetStringFromCharcode(DataView，exifIDCode，4)==='Exif') {

endianness=DataView。getuint 16(tiffOffset)；

小endian=endianness===0x 4949

if(小端| |端===0x4D4D/*双端*/){

if(DataView。getuint 16(tiffOffset 2，小端)=0x 002a){

first ifdofset=dataview。getuint 32(tiffOffset 4，小端字节序)；

if(FirstIFDofSet=0x 0000008){

ifdstat=tiffOffset first ifdofset；

}

}

}

}

}

if (ifdStart) {

length=dataview。getuint 16(ifdstat，little endian)；

for(I=0；我长度；i ) {

offset=IFdstart I * 12 ^ 2；

if (dataView.getUint16(offset，Little endian)==0x 0112/* Orientation */){

//8是当前标签值的偏移量

offset=8；

//获取原始方向值

orientation=DataView。getuint 16(offset，little endian)；

//使用旅行队的默认值来覆盖方向(#120)

if(IS _ SAFARI _ OR _ UIWEBSVIEW){

dataView.setUint16(offset，1，小端字节序)；

}

打破；

}

}

}

返回方向；

}

方法GetStringFromCharcode(Arraybbuffer)返回的方向就是图片的方向也就是旋转的值，再对应下面的表，对图片进行处理

方向值旋转角度

10

3180

6顺时针90度

逆时针8 90度

可以先判断Exif的方向值，然后根据上表对应的旋转值在画布上反方向旋转图片，消除影响

然后我会详细讲解如何在画布上旋转。