js点击图片翻转 JavaScript实现点击图片翻转效果

时间:2021-10-18 蒙奇. D. 柠檬人气:0

想了解JavaScript实现点击图片翻转效果的相关内容吗，蒙奇. D. 柠檬在本文为您仔细讲解js点击图片翻转的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：js点击图片翻转,js点击翻转,js图片翻转，下面大家一起来学习吧。

最近在做一个有关人脸采集的项目，然后在编写前端模块时，遇到了一个问题，就是当客户上传照片或直接拍照上传时，会遇到有些图片可能会90度翻转过来所以，我们需要给个按钮客户让客户自己可以对照品进行旋转效果大致如下

图1.正常图片上传

图2.图片左旋转

图3.图片右旋转

以上就是一个图片旋转功能

下面我们就开始代码部分吧

这里我采取了一个方法，然后当前我的图片格式是base64,如果遇到其它格式也无所谓，因为我们最终的效果还是要转为image对象来实现的

/**
     * 图片旋转
     * @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)
    }

注意：如果图片是跨域获取的话这里可能会使canvas转回base64出现问题，这时可能需要开启代理来进行图片获取

加载全部内容