在ios上图片旋转

[moshuchao]

如果我使用拍照获得的图片作为image_src，预览的时候是正常的，但是裁剪出来的图片旋转了90度。

[yuwengCipher]

我也遇到这个问题，谁能来解决下 啊~~~~~~~~~

[cat-kun]

为什么裁剪出来的图片会旋转了90度

[dntzhang]

你们需要这个库 : https://github.com/exif-js/exif-js
http://www.zixuephp.com/html/javascript/2016_07/42004.html

[Dreammy23]

EXIF中的Orientation代表照片方向，有1—8八个值，ios竖着拍照Orientation=6，所以照片歪着，需要调整
EXIF.getData(this.file, function(){
let Orientation = EXIF.getTag(this, 'Orientation');
//针对各种情况分别调整
switch(Orientation){
case'2':
. . .
case'8':
}
}

[dongnaebi]

写了个压缩/旋转类，可以参考下

import EXIF from 'exif-js'
class ImageFile {
  dataURLtoBlob (dataURL = '') {
    let arr = dataURL.split(',')
    let mime = arr[0].match(/:(.*?);/)[1]
    let bstr = window.atob(arr[1])
    let n = bstr.length
    let u8arr = new Uint8Array(n)
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n)
    }
    return new window.Blob([u8arr], {type: mime})
  }
  orientation (file = null) {
    return new Promise((resolve, reject) => {
      EXIF.getData(file, function () {
        const orientation = EXIF.getTag(this, 'Orientation')
        resolve(orientation)
      })
    })
  }
  toDataURL (file = null) {
    const fr = new window.FileReader()
    fr.readAsDataURL(file)
    return new Promise((resolve, reject) => {
      fr.onload = (f) => {
        resolve(f.target.result)
      }
    })
  }
  compress ({file = null, maxWidth = 1000, maxHeight = 1000, ratio = 1}) {
    const self = this
    let img = document.createElement('img')
    let canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    self.toDataURL(file).then(base64 => {
      img.src = base64
    })
    return new Promise((resolve, reject) => {
      img.onload = async () => {
        const orientation = await self.orientation(file)
        const originWidth = img.width
        const originHeight = img.height

        let targetWidth = originWidth
        let targetHeight = originHeight
        if (originWidth > maxWidth || originHeight > maxHeight) {
          if (originWidth / originHeight > maxWidth / maxHeight) {
            targetWidth = maxWidth
            targetHeight = Math.round(maxWidth * (originHeight / originWidth))
          } else {
            targetHeight = maxHeight
            targetWidth = Math.round(maxHeight * (originWidth / originHeight))
          }
        }
        canvas.width = targetWidth
        canvas.height = targetHeight
        if (orientation && orientation !== 1) {
          switch (orientation) {
            case 6:
              canvas.width = targetHeight
              canvas.height = targetWidth
              ctx.rotate(Math.PI / 2)
              ctx.drawImage(img, 0, -targetHeight, targetWidth, targetHeight)
              break
            case 3:
              ctx.rotate(Math.PI)
              ctx.drawImage(img, -targetWidth, -targetHeight, targetWidth, targetHeight)
              break
            case 8:
              canvas.width = targetHeight
              canvas.height = targetWidth
              ctx.rotate(3 * Math.PI / 2)
              ctx.drawImage(img, -targetWidth, 0, targetWidth, targetHeight)
              break
          }
        } else {
          ctx.drawImage(img, 0, 0, targetWidth, targetHeight)
        }

        let dataURL = canvas.toDataURL(file.type, ratio)
        let blob = await self.dataURLtoBlob(dataURL)
        img = null
        canvas = null // 释放内存
        resolve({dataURL, blob})
      }
    })
  }
}
export default ImageFile

[MicroJes]

重置图片方法 做一个转换

function resetOrientation(srcBase64, srcOrientation, callback) {
   var img = new Image();

   img.onload = function() {
   	var width = img.width,
   		height = img.height,
   		canvas = document.createElement('canvas'),
   		ctx = canvas.getContext("2d");

   	// set proper canvas dimensions before transform & export
   	if (4 < srcOrientation && srcOrientation < 9) {
   		canvas.width = height;
   		canvas.height = width;
   	} else {
   		canvas.width = width;
   		canvas.height = height;
   	}

   	// transform context before drawing image
   	switch (srcOrientation) {
   		case 2:
   			ctx.transform(-1, 0, 0, 1, width, 0);
   			break;
   		case 3:
   			ctx.transform(-1, 0, 0, -1, width, height);
   			break;
   		case 4:
   			ctx.transform(1, 0, 0, -1, 0, height);
   			break;
   		case 5:
   			ctx.transform(0, 1, 1, 0, 0, 0);
   			break;
   		case 6:
   			ctx.transform(0, 1, -1, 0, height, 0);
   			break;
   		case 7:
   			ctx.transform(0, -1, -1, 0, height, width);
   			break;
   		case 8:
   			ctx.transform(0, -1, 1, 0, 0, width);
   			break;
   		default:
   			break;
   	}

   	// draw image
   	ctx.drawImage(img, 0, 0);

   	// export base64
   	callback(canvas);
   };

   img.src = srcBase64;
}