手機拍照上傳到服務器時自動旋轉

  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