用canvas将base64图片旋转90度的倍数

用canvas将base64图片旋转90度的倍数

//旋转方法    旋转图片 src 为路径 edg 是旋转度数
function rotateBase64Img (src, edg) {
  return new Promise((resolve, reject) => {
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    let imgW // 图片宽度
    let imgH // 图片高度
    let size // canvas初始大小
    if (edg % 90 !== 0) {
      console.error('旋转角度必须是90的倍数!')
      reject('旋转角度必须是90的倍数!')
    }
    edg < 0 && (edg = (edg % 360) + 360)
    const quadrant = (edg / 90) % 4 // 旋转象限
    const cutCoor = { sx: 0, sy: 0, ex: 0, ey: 0 } // 裁剪坐标
    const image = new Image()
    image.crossOrigin = 'anonymous'
    image.src = src
    image.onload = function () {
      console.log('加载了')

      imgW = image.width
      imgH = image.height
      size = imgW > imgH ? imgW : imgH
      canvas.width = size * 2
      canvas.height = size * 2
      switch (quadrant) {
        case 0:
          cutCoor.sx = size
          cutCoor.sy = size
          cutCoor.ex = size + imgW
          cutCoor.ey = size + imgH
          break
        case 1:
          cutCoor.sx = size - imgH
          cutCoor.sy = size
          cutCoor.ex = size
          cutCoor.ey = size + imgW
          break
        case 2:
          cutCoor.sx = size - imgW
          cutCoor.sy = size - imgH
          cutCoor.ex = size
          cutCoor.ey = size
          break
        case 3:
          cutCoor.sx = size
          cutCoor.sy = size - imgW
          cutCoor.ex = size + imgH
          cutCoor.ey = size + imgW
          break
      }
      ctx?.translate(size, size)
      ctx?.rotate((edg * Math.PI) / 180)
      // drawImage向画布上绘制图片
      ctx?.drawImage(image, 0, 0)
      // getImageData() 复制画布上指定矩形的像素数据
      const imgData = ctx?.getImageData(cutCoor.sx, cutCoor.sy, cutCoor.ex, cutCoor.ey)
      if (quadrant % 2 == 0) {
        canvas.width = imgW
        canvas.height = imgH
      } else {
        canvas.width = imgH
        canvas.height = imgW
      }
      // putImageData() 将图像数据放回画布
      ctx?.putImageData(imgData, 0, 0)
  
      const newBase64Str = canvas.toDataURL('image/jpeg', 1.0)
      console.log('newBase64Str----', newBase64Str)
      resolve(newBase64Str)
    }
  })
}



//使用的时候      
    async getRotateImg (base64, edg) {
      let imgSrc = base64
      imgSrc = await rotateBase64Img(base64, 270)
     // console.log('imgSrc ', imgSrc ) 旋转后的base64图片
    },

参考了其他文章上面再根据项目需求优化了一下。用async await 得到图片。
参考文章：https://blog.csdn.net/qq_36947128/article/details/112020379