JavaScript实现点击图片翻转效果

/**
     * 图片旋转
     * @param direction 旋转的方向
     */
    rotate (direction) {
      const img = new Image()
      // 这里的思维就是，把图片映射到一个画板上，然后对图片进行重新绘制，所以这里要建一个canvas对象来充当我们的画板
      const canvas = document.createElement('canvas')
      // base64转换image对象
      img.src = this.uploadImage
      // 这里记得一定要在base64转换成图片对象后再进行其它操作，笔者在这里踩了个坑，onload方法就是图片加载再进行其它操作，如果图片是文件路径方式跨域调用效果更加明显
      img.onload = () => {
        // img的高度和宽度不能在img元素隐藏后获取，否则会出错
        const height = img.height
        const width = img.width
        // 旋转角度以弧度值为参数
        const ctx = canvas.getContext('2d')
        if (direction === 'right') {
          canvas.width = height
          canvas.height = width
          ctx.rotate(90 * Math.PI / 180)
          ctx.drawImage(img, 0, 0, width, -height)
        } else {
          canvas.width = height
          canvas.height = width
          ctx.rotate(-90 * Math.PI / 180)
          ctx.drawImage(img, 0, 0, -width, height)
        }
        // 旋转后的图片重新转为base64
        this.uploadImage = this.getBase64Image(img, canvas)
      }
    },
    /**
    * 把image文件转为base64
    */
    getBase64Image (img, canvas) {
      const ctx = canvas.getContext('2d')
      ctx.drawImage(img, 0, 0, img.width, img.height)
      const ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
      return canvas.toDataURL('image/' + ext)
    }