h5嵌入app时在ios和小米等机型上会出现上传图片会出现逆时针旋转的问题

原因： 这是因为不同手机拍照时算法不同 生成的图片对象属性不同 在iOS等设备上生成会被web端捕获的旋转属性‘Orientation’

那么怎么解决呢？

原生使用==》http://code.ciaoca.com/javascript/exif-js/

vue 解决

步骤一：我们现需要下载插件

1
2
3
npm install exif-js --save

import Exif from 'exif-js';

步骤二：获取‘orientation’

1
2
3
4
5
6
var orientation
 /* eslint-disable func-names */
 // EXIF js 可以读取图片的元信息 https://github.com/exif-js/exif-js
 Exif.getData(file, function () {
   orientation = Exif.getTag(this, 'Orientation')
 })

步骤三：生成本地图片文件 图片

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
export function getImgData (img, dir, next) { // 文件旋转方法
  var image = new Image()
  image.onload = function () {
    //预设长款参数
    var degree = 0; var drawWidth; var drawHeight; var width; var height
    drawWidth = this.naturalWidth
    drawHeight = this.naturalHeight
    // 以下改变一下图片大小
    var maxSide = Math.max(drawWidth, drawHeight)
    if (maxSide > 1024) {
      var minSide = Math.min(drawWidth, drawHeight)
      minSide = minSide / maxSide * 1024
      maxSide = 1024
      if (drawWidth > drawHeight) {
        drawWidth = maxSide
        drawHeight = minSide
      } else {
        drawWidth = minSide
        drawHeight = maxSide
      }
    }
    var canvas = document.createElement('canvas')
    canvas.width = width = drawWidth
    canvas.height = height = drawHeight
    var context = canvas.getContext('2d')
    // 判断图片方向，重置canvas大小，确定旋转角度，默认的是home键在右方的横屏拍摄方式
    switch (dir) {
      // 横屏拍摄，此时home键在左侧
      case 3:
        degree = 180
        drawWidth = -width
        drawHeight = -height
        break
        // 竖屏拍摄，此时home键在下方(正常拿手机的方向)
      case 6:
        canvas.width = height
        canvas.height = width
        degree = 90
        drawWidth = width
        drawHeight = -height
        break
        // 竖屏拍摄，此时home键在上方
      case 8:
        canvas.width = height
        canvas.height = width
        degree = 270
        drawWidth = -width
        drawHeight = height
        break
    }
    // 使用canvas旋转校正
    context.rotate(degree * Math.PI / 180)
    context.drawImage(this, 0, 0, drawWidth, drawHeight)
    // 返回校正图片 以文件流方式
    next(canvas.toDataURL('image/jpeg', 0.8))
  }
  image.src = img
}

成功后：

1
2
3
4
5
6
7
8
9
10
Exif.getData(file, function () {
    orientation = Exif.getTag(this, 'Orientation')
    var oReader = new FileReader()
    oReader.onload = function (e) {
      getImgData(this.result, orientation, function (data) {
        // 这里可以使用校正后的图片data了
      })
    }
    oReader.readAsDataURL(file)
  })

附加：base64转文件对象方法

1
2
3
4
5
6
7
8
9
10
11
12
export function dataURLtoFile (dataUrl) {
  const filename = `${Date.now()}.jpeg`
  const arr = dataUrl.split(',')
  const mime = arr[0].match(/:(.*?);/)[1]
  const bstr = atob(arr[1])
  let n = bstr.length
  const u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], filename, { type: mime })
}