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
转载于:https://www.cnblogs.com/Strive-count/p/11598710.html
