webapp iOS拍照90度旋转问题

发表于 分类于 阅读次数：

通过下面这个库可以获取到在iOS下图片旋转的方向值 http://code.ciaoca.com/javascript/exif-js/

1
2
3
4
5
EXIF.getData(file, function(){
  EXIF.getAllTags(this);
  var orientation = EXIF.getTag(this, 'Orientation');
  console.log(orientation);
});

file值的获取方式如下

1
file = document.getElementById('imgElement');

或者

1
file = event.target.files[0]

orientation值的说明，可参考文章 https://blog.csdn.net/happy08god/article/details/11528479

部分实现代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
function handleFiles(file) {
  var orientation = null;
  EXIF.getData(file, function () {
    EXIF.getAllTags(this);
    orientation = EXIF.getTag(this, 'Orientation');
  });
  var t = this;
  var reader = new FileReader();
  reader.readAsDataURL(file);

  reader.onload = function () {
    var result = this.result;
    var img = new Image();
    img.src = result;

    img.onload = function () {
      var canvas = document.createElement("canvas");
      var ctx = canvas.getContext("2d");
      canvas.width = t.getImage.width;
      canvas.height = t.getImage.height;
      ctx.drawImage(this, 0, 0, t.getImage.width, t.getImage.height);

      switch (orientation) {
        case 6:
          //需要顺时针（向左）90度旋转
          console.log('需要顺时针（向左）90度旋转');
          t.rotateImg(this, 'left', canvas);
          result = canvas.toDataURL();
          break;

        case 8:
          //需要逆时针（向右）90度旋转
          console.log('需要逆时针（向右）90度旋转');
          t.rotateImg(this, 'right', canvas);
          result = canvas.toDataURL();
          break;

        case 3:
          //需要180度旋转
          console.log('需要180度旋转');
          t.rotateImg(this, 'right', canvas); //转两次

          t.rotateImg(this, 'right', canvas);
          result = canvas.toDataURL();
          break;
      }

      t.imgUrl = result;
      t.paintImg(result, orientation);
    };
  };
}

function rotateImg(img, direction, canvas) {
  //最小与最大旋转方向，图片旋转4次后回到原方向
  var min_step = 0;
  var max_step = 3; //var img = document.getElementById(pid);

  if (img == null) return; //img的高度和宽度不能在img元素隐藏后获取，否则会出错

  var height = img.height;
  var width = img.width; //var step = img.getAttribute('step');

  var step = 2;

  if (step == null) {
    step = min_step;
  }

  if (direction == 'right') {
    step++; //旋转到原位置，即超过最大值

    step > max_step && (step = min_step);
  } else {
    step--;
    step < min_step && (step = max_step);
  } //旋转角度以弧度值为参数

  var degree = step * 90 * Math.PI / 180;
  var ctx = canvas.getContext('2d');

  switch (step) {
    case 0:
      canvas.width = width;
      canvas.height = height;
      ctx.drawImage(img, 0, 0);
      break;

    case 1:
      canvas.width = height;
      canvas.height = width;
      ctx.rotate(degree);
      ctx.drawImage(img, 0, -height);
      break;

    case 2:
      canvas.width = width;
      canvas.height = height;
      ctx.rotate(degree);
      ctx.drawImage(img, -width, -height);
      break;

    case 3:
      canvas.width = height;
      canvas.height = width;
      ctx.rotate(degree);
      ctx.drawImage(img, -width, 0);
      break;
  }
}