van-uploader手机拍照后，图片旋转

问题描述：app开发中有个拍照并上传的功能，利用了van-uploader组件，部分安卓手机在拍照后预览回显时，照片被逆时针旋转了90度，找了很多都没找到可以解决的方案，最后决定：上传前将图片展示出来，可以手动旋转跳转图片，效果图如下，可点击按钮进行旋转图片，确定按钮进行上传功能。

<van-uploader
 :after-read="afterRead"
 :before-delete="beforeDelete"
 v-model="fileList"
></van-uploader>

文件读取完成后的回调函数after-read，拿到图片信息后进行展示。

// 上传图片
const afterRead = (inputFiles, detail) => {
  photoCallBack(inputFiles.content.replace(/^data:image\/\w+;base64,/, ''))
}
const loading = ref(false)
const checkImages = ref([])
const checkImageShow = ref(false)

//  图片处理函数及上传
function photoCallBack(base64) {
  const imageBaseURL = `data:image/jpeg;base64,${base64}`
  const image = new Image()
  image.src = imageBaseURL
  image.onload = () => {
    checkImageShow.value = true
    checkImages.value = [imageBaseURL]
    loading.value = false
    ToastClear()
  }
  image.onerror = () => {
    console.log('我不是图片')
    loading.value = false
    ToastClear()
  }
}

弹框展示图片代码

<VanImagePreview :show="checkImageShow" :images="checkImages" class-name="image-checker">
 <template #index>
   <div>
     请您确认图片方向正确，如有旋转请调整到正向
   </div>
 </template>
 <template #cover>
   <div class="image-checker__controls">
     <van-button :loading="loading" :disabled="loading" class="image-checker__controls-item" @click="rotateImage">
       旋转
     </van-button>
     <van-button :loading="loading" :disabled="loading" type="primary" class="image-checker__controls-item" @click="confirmImage">
       确定
     </van-button>
   </div>
 </template>
</VanImagePreview>

图片旋转功能，利用canvas实现图片旋转

function rotateImage() {
  loading.value = true
  const url = checkImages.value[0]

  if (!url) return
  const image = new Image()

  image.src = url

  image.onload = function () {
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')

    canvas.width = image.height
    canvas.height = image.width

    ctx.translate(canvas.width / 2, canvas.height / 2)
    ctx.rotate(90 * Math.PI / 180)
    ctx.drawImage(image, -image.width / 2, -image.height / 2)

    const base64 = canvas.toDataURL('image/jpeg')
    checkImages.value = [base64]
    loading.value = false
  }

  image.onerror = () => {
    loading.value = false
  }
}