1 //使用前确保已经引入exif.js。下载地址：http://code.ciaoca.com/javascript/exif-js/
2 var file=document.getElementById('imagefile').files[0];//获取文件流
3 correcctImageOrientation(file);//调用方法，将图片修正。
4 // 纠正图片旋转方向
5 function correcctImageOrientation(file) {
6 var Orientation = null;
7 if (file) {
8 var rFilter = /^(image\/jpeg|image\/png)$/i; // 检查图片格式
9 if (!rFilter.test(file.type)) {
10 return;
11 }
12 // 获取照片方向角属性，用户旋转控制
13 EXIF.getData(file, function() {
14 EXIF.getAllTags(this);
15 Orientation = EXIF.getTag(this, 'Orientation');//获取图片旋转弧度
16 });
17 var oReader = new FileReader();
18 oReader.onload = function(e) {
19 var image = new Image();
20 image.src = e.target.result;
21 image.onload = function() {
22 var expectWidth = this.naturalWidth;
23 var expectHeight = this.naturalHeight;
24 // 压缩图片。最大宽800，最大高1200
25 if (this.naturalWidth > this.naturalHeight && this.naturalWidth > 800) {
26 expectWidth = 800;
27 expectHeight = expectWidth * this.naturalHeight / this.naturalWidth;
28 } else if (this.naturalHeight > this.naturalWidth && this.naturalHeight > 1200) {
29 expectHeight = 1200;
30 expectWidth = expectHeight * this.naturalWidth / this.naturalHeight;
31 }
32 // 绘制canvas
33 var canvas = document.createElement("canvas");
34 var ctx = canvas.getContext("2d");
35 canvas.width = expectWidth;
36 canvas.height = expectHeight;
37 ctx.drawImage(this, 0, 0, expectWidth, expectHeight);
38 // base64 字符串
39 var base64 = null;
40 if(Orientation != "" && Orientation != 1){
41 switch(Orientation){
42 case 6:
43 // 需要顺时针（向左）90度旋转
44 rotateImg(this,'left',canvas);
45 break;
46 case 8:
47 //需要逆时针（向右）90度旋转
48 rotateImg(this,'right',canvas);
49 break;
50 case 3:
51 //需要180度旋转
52 rotateImg(this,'right',canvas);//转两次
53 rotateImg(this,'right',canvas);
54 break;
55 }
56 }
57 base64 = canvas.toDataURL("image/jpeg", 0.8);
58 // 用base64回显
59 var myImageList = $('.myImage');
60 var len = $('.myImage').length;
61 $('#myImg').attr("src", base64);//将处理好的图片流放到对应的元素中显示
62 };
63 };
64 oReader.readAsDataURL(file);
65 }
66 }
67
68 // 对图片旋转处理
69 function rotateImg(img, direction,canvas) {
70 // 最小与最大旋转方向，图片旋转4次后回到原方向
71 var min_step = 0;
72 var max_step = 3;
73 if (img == null)return;
74 // img的高度和宽度不能在img元素隐藏后获取，否则会出错
75 var height = img.height;
76 var width = img.width;
77 var step = 2;
78 if (step == null) {
79 step = min_step;
80 }
81 if (direction == 'right') {
82 step++;
83 // 旋转到原位置，即超过最大值
84 step > max_step && (step = min_step);
85 } else {
86 step--;
87 step < min_step && (step = max_step);
88 }
89 // 旋转角度以弧度值为参数
90 var degree = step * 90 * Math.PI / 180;
91 var ctx = canvas.getContext('2d');
92 switch (step) {
93 case 0:
94 canvas.width = width;
95 canvas.height = height;
96 ctx.drawImage(img, 0, 0);
97 break;
98 case 1:
99 canvas.width = height;
100 canvas.height = width;
101 ctx.rotate(degree);
102 ctx.drawImage(img, 0, -height);
103 break;
104 case 2:
105 canvas.width = width;
106 canvas.height = height;
107 ctx.rotate(degree);
108 ctx.drawImage(img, -width, -height);
109 break;
110 case 3:
111 canvas.width = height;
112 canvas.height = width;
113 ctx.rotate(degree);
114 ctx.drawImage(img, -width, 0);
115 break;
116 }
117 }
118
