手机拍照上传到服务器时自动旋转 

  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 　　

 

posted @ 2019-09-27 16:24  Strive-count  阅读(361)  评论(0)    收藏  举报