Vue.js图片预览组件中部分图片自动横向翻转问题求助

这个问题我之前也碰到过！核心原因是手机拍摄的图片会带有EXIF方向元数据——它记录了图片拍摄时的旋转角度，但浏览器在渲染background-image的时候并不会自动读取并应用这个方向信息，所以才会出现竖屏长图被横向翻转的情况。

下面给你两种解决方案，分别适用于预览场景和需要上传纠正后图片的场景：

方案一：用CSS Transform快速纠正预览方向（轻量首选） #

这种方式不需要修改图片本身，只通过CSS旋转来匹配EXIF记录的方向，适合预览场景：

步骤1：引入EXIF解析库 #

我们需要读取图片的EXIF信息，推荐使用成熟的exif-js库：

npm install exif-js --save

步骤2：修改Vue组件代码 #

在组件中引入库并更新方法：

import EXIF from 'exif-js'

export default {
  data() {
    return {
      img: '',
      imageTransform: '' // 用于存储纠正方向的transform样式
    }
  },
  methods: {
    chooseImage() {
      this.$refs.fileInput.click()
    },
    previewImage(e) {
      const file = e.target.files[0]
      if (!file) return

      const reader = new FileReader()
      reader.onload = (event) => {
        // 读取图片的EXIF方向信息
        EXIF.getData(file, () => {
          const orientation = EXIF.getTag(file, 'Orientation')
          this.img = event.target.result
          // 根据方向设置纠正样式
          this.setCorrectTransform(orientation)
        })
      }
      reader.readAsDataURL(file)
    },
    setCorrectTransform(orientation) {
      // 不同Orientation对应的旋转角度
      let transform = ''
      switch (orientation) {
        case 3: // 图片旋转180度
          transform = 'rotate(180deg)'
          break
        case 6: // 图片顺时针旋转90度
          transform = 'rotate(90deg)'
          break
        case 8: // 图片逆时针旋转90度
          transform = 'rotate(-90deg)'
          break
        default:
          transform = ''
      }
      this.imageTransform = transform
    }
  }
}

步骤3：更新模板绑定样式 #

给预览容器添加transform样式绑定：

<div id="capture" class="image-input" 
     :style="{ 
       'background-image': `url(${img})`,
       'transform': imageTransform,
       'transform-origin': 'center center'
     }" 
     @click="chooseImage" >
  <span v-if="!img" class="placeholder">
    <i class="el-icon-plus avatar-uploader-icon"></i>
  </span>
  <input type="file" ref="fileInput" @change="previewImage" hidden>
</div>

方案二：用Canvas重绘图片（适合需要上传纠正后图片的场景） #

如果需要把纠正方向后的图片上传到服务器，就需要用Canvas重绘图片，生成新的Blob或DataURL：

在组件中添加这个方法：

async getCorrectedImage(file, orientation) {
  return new Promise((resolve) => {
    const img = new Image()
    img.src = URL.createObjectURL(file)
    img.onload = () => {
      const canvas = document.createElement('canvas')
      const ctx = canvas.getContext('2d')

      // 根据方向调整Canvas尺寸
      if (orientation === 6 || orientation === 8) {
        canvas.width = img.height
        canvas.height = img.width
      } else {
        canvas.width = img.width
        canvas.height = img.height
      }

      // 根据EXIF方向旋转画布
      switch (orientation) {
        case 2: ctx.transform(-1, 0, 0, 1, img.width, 0); break
        case 3: ctx.transform(-1, 0, 0, -1, img.width, img.height); break
        case 4: ctx.transform(1, 0, 0, -1, 0, img.height); break
        case 5: ctx.transform(0, 1, 1, 0, 0, img.width); break
        case 6: ctx.transform(0, 1, -1, 0, img.height, 0); break
        case 7: ctx.transform(0, -1, -1, 0, img.height, img.width); break
        case 8: ctx.transform(0, -1, 1, 0, 0, img.width); break
      }

      // 绘制纠正后的图片
      ctx.drawImage(img, 0, 0)
      canvas.toBlob((blob) => {
        // 可以把blob转成DataURL用于预览，或者直接上传
        const correctedDataUrl = URL.createObjectURL(blob)
        this.img = correctedDataUrl
        resolve(blob)
        URL.revokeObjectURL(img.src)
      }, file.type)
    }
  })
}

然后在previewImage方法中调用：

previewImage(e) {
  const file = e.target.files[0]
  if (!file) return

  EXIF.getData(file, async () => {
    const orientation = EXIF.getTag(file, 'Orientation')
    const correctedBlob = await this.getCorrectedImage(file, orientation)
    // 这里可以把correctedBlob上传到服务器
  })
}

补充说明 #

• EXIF的Orientation标签有8种可能的值，上面的代码覆盖了所有常见的旋转场景
• 如果你不想引入第三方库，也可以用原生的ImageBitmap或手动解析文件二进制数据来读取EXIF，但复杂度会高很多，推荐用成熟库节省时间

内容的提问来源于stack exchange，提问作者Reinier68