华域联盟 JAVA JavaScript实现点击图片翻转效果

JavaScript实现点击图片翻转效果

最近在做一个有关人脸采集的项目,然后在编写前端模块时,遇到了一个问题,就是当客户上传照片或直接拍照上传时,会遇到有些图片可能会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出现问题,这时可能需要开启代理来进行图片获取

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持华域联盟。

您可能感兴趣的文章:

本文由 华域联盟 原创撰写:华域联盟 » JavaScript实现点击图片翻转效果

转载请保留出处和原文链接:https://www.cnhackhy.com/83476.htm

本文来自网络,不代表华域联盟立场,转载请注明出处。

作者: sterben

发表回复

联系我们

联系我们

2551209778

在线咨询: QQ交谈

邮箱: [email protected]

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部