EXIF.getData(IMG_FILE, function () { // IMG_FILE为图像数据

var orientation = EXIF.getTag(this, “Orientation”);

console.log(“Orientation:” + orientation); // 拍照方向

});

获取拍照方向的结果为1-8的数字：

注意：对于上面的八种方向中，加了*的并不常见，因为它们代表的是镜像方向，如果不做任何的处理，不管相机以任何角度拍摄，都无法出现镜像的情况。

这个表格代表什么意义？我们来看第一行，值为1时，右边两列的值分别为：Row #0 is Top，Column #0 is Left side，其实很好理解，它表示照片的第一行位于顶端，而第一列位于左侧，那么这张照片自然就是以正常角度拍摄的。

而这8种结果，就是第一行与第一列所在的位置的8种组合。

测试发现

（1）iOS手机横着拍的照片，照片方向显示正常。

（2） iOS手机竖着拍的照片，照片旋转了90度

测试发现照片Orientaion信息为：1、3、6、8四种状态。

我们在前端对图片进行像素处理或者drawInRect等操作之后，照片的Orientaion信息，即为拍照方向信息被删除了，所以iOS手机竖着拍的照片又回到了横着的状态，看起来也就是逆时针旋转了90°！

那么如何纠正这个旋转角度呢？

其实思路也很简单：在处理图片之前，先读取并保存图片的拍照方向信息，然后在处理图片之后，再根据拍照方向，对图片进行相应的调整，lrz.js 中的代码如下：

其中，translate是平移变换，scale(-1,1)是向左翻转，rotate是顺时针旋转。

switch (orientation) {

case 3:

context.rotate(180 * Math.PI / 180);

context.drawImage(that, -targetWidth, -targetHeight, targetWidth, targetHeight);

break;

case 6:

context.rotate(90 * Math.PI / 180);

context.drawImage(that, 0, -targetWidth, targetHeight, targetWidth);

break;

case 8:

context.rotate(270 * Math.PI / 180);

context.drawImage(that, -targetHeight, 0, targetHeight, targetWidth);

break;

case 2:

context.translate(targetWidth, 0);

context.scale(-1, 1);

context.drawImage(that, 0, 0, targetWidth, targetHeight);

break;

case 4:

context.translate(targetWidth, 0);

context.scale(-1, 1);

context.rotate(180 * Math.PI / 180);

context.drawImage(that, -targetWidth, -targetHeight, targetWidth, targetHeight);

break;

case 5:

React

• 介绍一下react

• React单项数据流

• react生命周期函数和react组件的生命周期

• react和Vue的原理，区别，亮点，作用

• reactJs的组件交流

• 有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢

• 项目里用到了react，为什么要选择react，react有哪些好处

• 怎么获取真正的dom

• 选择react的原因

• react的生命周期函数

• setState之后的流程

• react高阶组件知道吗？

• React的jsx，函数式编程

• react的组件是通过什么去判断是否刷新的

• 如何配置React-Router

• 路由的动态加载模块

• Redux中间件是什么东西，接受几个参数

• redux请求中间件如何处理并发