js实现base64图片旋转方向

最新推荐文章于 2025-02-23 15:18:23 发布

AQMAX

最新推荐文章于 2025-02-23 15:18:23 发布

阅读量3.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_38332693/article/details/127365527

web前端专栏收录该内容

33 篇文章

订阅专栏

最近做需求的时候遇到将base64格式的图片进行旋转并生成新的 base64，以下是在借鉴大佬的代码，做个记录。

//src - 图片路径，deg旋转角度
const rotateBase64Img = async(src, edg) => {
      const canvas = document.createElement('canvas')
      const ctx = canvas.getContext('2d')
      let imgW// 图片宽度
      let imgH// 图片高度
      let size// canvas初始大小
      if (edg % 90 != 0) {
        console.error('旋转角度必须是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 = await function() {
        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)
        ctx.drawImage(image, 0, 0)
        var 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
        }
        ctx.putImageData(imgData, 0, 0)
        // 获取旋转后的base64图片
        state.esignImg = canvas.toDataURL()
        state.showEsign = false
      }
}