<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片旋转</title>
</head>
<body>
<div id="result-stub" class="well hidden">
<canvas id="canvas" width="345" height="345">
<p>你的浏览器不支持canvas元素</p>
</canvas>
</div>
<script>
window.onload=function() {
//1、 获取到画布对象以及画布的上下文对象
var canvas = document.getElementById('canvas')
var context = canvas.getContext('2d')
//2、 在画布上进行图片绘制
var img = new Image()
img.src = 'fist-pump-baby.jpg'//这里是绘制图片的路径
img.onload = function() {
context.drawImage(img, 0, 0)
}
//3、 设置画布旋转
context.rotate(0.2)//通过rotate方法以弧度为参数旋转图像
//在rotate中传入的参数为弧度。如果你对弧度不太了解，在HTML5中还提供了一个函数degreeToRadians（）。它可以将度数转换为弧度。这里传入-15，即表示将图像向左旋转15度。如需把旋转的角度转换为弧度的公式为：( 度数*PI )/ 180。这两种传入弧度的方法你选择一种即可。
//context.rotate(degreesToRadians(-15))
}
</script>
<script src="jquery.js"></script>
</body>
</html>
这些都是有关于HTML5新特性的一些应用。给你推荐一个教程网站秒秒学，该网站上有关于HTML5新特性的讲解，可以去看看，希望对你有帮助。
图片旋转可以用CSS3中的动画效果来做，CSS3中，允许使用 3D 转换来对元素进行格式化。示例代码如下：
<style>
*{margin:0padding:0}/*简单可以自定义，参照上面*/
body{font:14px/1.5 "\5FAE\8F6F\96C5\9ED1","\5B8B\4F53", sans-serif, Arial, Systembackground-color:#FFF}
#imgg{animation:imgg 1s linear 0s infinite}
@keyframes imgg{0% {transform:rotateY(0deg)}25%{transform:rotateY(90deg)}50%{transform:rotateY(180deg)}75%{transform:rotateY(270deg)}100% {transform:rotateY(360deg)}}
</style>
<div id="demo">
<img src="图片地址" alt="" width="100" height="100" id="imgg">
</div>
它的主要功能就是上传两张人像，通过算法进行分析对比，最后得出一个相似度的分数，以验证你们是天造地设还是颜值互补。但是，当我们把上传的图片转换成base64格式，发送给后台时，会发现偶尔会出现问题，有一些图片本来是这样的：
柴犬
处理之后却变成了这样：
柴犬2
经过测试发现，只有iOS手机竖着拍的照片才会出现这样的问题，而iOS手机横着拍的照片、Android手机拍的照片以及通过屏幕截图、网络下载等途径获得的图片都不会产生这个问题。
那么，这到底是为什么呢？
在开发过程中，由于时间紧迫，未求甚解，使用了github上的一个开源项目 lrz.js 来解决此问题，这个工具的主要用途是在尽量保证图片质量的前提下压缩图片的大小，但同时也附带了图片旋转角度纠正的功能。
通过阅读 lrz.js 的源代码，我发现它引入了一个叫做 exif.js 的库来实现旋转角度的纠正，它提供了js读取图像的原始数据的功能扩展，例如：拍照方向、相机设备型号、拍摄时间、ISO 感光度、GPS 地理位置等数据。而拍照方向就是关键所在！
exif.js 获取图像的拍照方向的代码如下：
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种组合。
那么，我们来测试一下iOS手机横着拍的照片，来看看它的拍照方向是什么呢？
测试1
结果是1，即以正常角度拍摄的，其实也就是原图啦~
那么，我们再测试一下iOS手机竖着拍的照片，来看看它的拍照方向是什么呢？
测试2
原来是6！即第一行位于右侧，第一列位于顶端，其实相当于将照片顺时针旋转了90度！
所以，实际上iOS手机竖着拍出的照片与横着拍出的照片其本质上是一样的，只不过竖着拍出的照片被添加了一个顺时针旋转90°的拍照方向，所以显示的时候，就变成了上下边窄左右边宽的状态，其实也就是横着拍的照片顺时针旋转90°而成的~
那么明白了这些，文章开头所说的照片旋转bug的原因，也就很简单啦~
其实就是当我们在前端对图片进行像素处理或者drawInRect等操作之后，照片的Orientaion信息，即为拍照方向信息被删除了，所以iOS手机竖着拍的照片又回到了横着的状态，看起来也就是逆时针旋转了90°！
那么如何纠正这个旋转角度呢？
其实思路也很简单：在处理图片之前，先读取并保存图片的拍照方向信息，然后在处理图片之后，再根据拍照方向，对图片进行相应的调整，lrz.js 中的代码如下：
switch (orientation) {
case 3:
ctx.rotate(180 * Math.PI / 180)
ctx.drawImage(img, -resize.width, -resize.height, resize.width, resize.height)
break
case 6:
ctx.rotate(90 * Math.PI / 180)
ctx.drawImage(img, 0, -resize.width, resize.height, resize.width)
break
case 8:
ctx.rotate(270 * Math.PI / 180)
ctx.drawImage(img, -resize.height, 0, resize.height, resize.width)
break
case 2:
ctx.translate(resize.width, 0)
ctx.scale(-1, 1)
ctx.drawImage(img, 0, 0, resize.width, resize.height)
break
case 4:
ctx.translate(resize.width, 0)
ctx.scale(-1, 1)
ctx.rotate(180 * Math.PI / 180)
ctx.drawImage(img, -resize.width, -resize.height, resize.width, resize.height)
break
case 5:
ctx.translate(resize.width, 0)
ctx.scale(-1, 1)
ctx.rotate(90 * Math.PI / 180)
ctx.drawImage(img, 0, -resize.width, resize.height, resize.width)
break
case 7:
ctx.translate(resize.width, 0)
ctx.scale(-1, 1)
ctx.rotate(270 * Math.PI / 180)
ctx.drawImage(img, -resize.height, 0, resize.height, resize.width)
break
default:
ctx.drawImage(img, 0, 0, resize.width,resize.height)
}
其中，translate是平移变换，scale(-1,1)是向左翻转，rotate是顺时针旋转。
举例说明 case 2，当图片的拍照方向为2时，即第一行位于顶端，而第一列位于右侧，其实相当于把照片进行了左右的翻转。所以，这里对图片的操作是，先向右平移等于图片宽度的距离，再向左翻转，这相当于以图片水平方向的对称轴为轴进行了左右翻转，然后再以（0，0）为起始点绘制原宽高的图片，即完成了对拍照方向的纠正。
最后
经过一系列的测试，发现确实只有iOS手机的竖拍照片与横拍照片是通过拍照方向来区别的，Android手机无论竖拍还是横拍的照片，拍照方向都为1，也就是说即使丢失了拍照方向这一信息，也不会影响到图片的旋转角度。而手机或电脑的屏幕截图、网络上的图片、通过PS制作的图片等也是如此。
作者：任无名F
链接：http://www.jianshu.com/p/ad4501db178e
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
