用JS怎么实现点击上传的图片可以旋转的功能-群英

上一篇：JS中onclick和click分别是什么含义，使用有何不同下一篇：JavaScript标签语句用于什么，如何使用

本篇内容介绍了“用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出现问题，这时可能需要开启代理来进行图片获取

现在大家对于用JS怎么实现点击上传的图片可以旋转的功能的内容应该都有一定的认识了吧，希望这篇能对大家有所帮助。最后，想要了解更多，欢迎关注群英网络，群英网络将为大家推送更多相关的文章。