扫码登录流程记录（附base64转图片、倒计时）

qq_40224032

已于 2023-03-31 17:11:34 修改

阅读量129

点赞数 1

文章标签： javascript 前端开发语言

于 2023-03-31 16:59:29 首次发布

本文链接：https://blog.csdn.net/qq_40224032/article/details/129884005

版权

文章讲述了如何从后端获取base64编码并转换为图片，同时提供了将base64转换为文件的方法。接着，文中介绍了一个计时器函数用于在指定时间差内进行倒计时，以及如何根据时间差更新图片和执行关闭操作。最后，文章提到了使用WebSocket进行连接，如果登录成功则关闭连接，否则重新获取图片并启动倒计时。

摘要由CSDN通过智能技术生成

1、首先从后端获取一个base64，将它转为图片

 this.imgUrl = 'data:image/png;base64,' + btoa(new Uint8Array(res).reduce((res, byte) => res + String.fromCharCode(byte), ''))

( 顺便记录一下base64转文件）

let dataurl='data:image/png;base64,' + res

this.dataURLtoFile(dataurl)  //返回文件格式

dataURLtoFile(dataurl, filename = 'file') {
          let arr = dataurl.split(',')
          let mime = arr[0].match(/:(.*?);/)[1]
          let suffix = mime.split('/')[1]
          let bstr = atob(arr[1])
          let n = bstr.length
          let u8arr = new Uint8Array(n)
          while (n--) {
              u8arr[n] = bstr.charCodeAt(n)
          }
          return new File([u8arr], `${filename}.${suffix}`, {
              type: mime
          })
},

2、获取当前时间，进行图片失效倒计时

function countdown() {
      const end = new Date().getTime()    // end 可以是后台返的数据，代表创建订单的那一个时刻的毫秒数
      const now = new Date().getTime()   // 获取当前时间的毫秒数
      const minus = now - end
      const m_30 = 30 * 60 * 1000 // 30分钟毫秒数，如十分钟倒计时，公式即为10*60*100，以此类推

      const differ = m_30 - minus    // 时间差

      let m = parseInt(differ / 1000 / 60 % 60)
      let s = parseInt(differ / 1000 % 60)

      this.m = m > 9 ? m : '0' + m
      this.s = s > 9 ? s : '0' + s
      const that = this
      if (m >= 0 && s >= 0 && this.scanSuccess==false) {
        if (m == 0 && s == 0) {
          this.imgUrl=''
          this.onclose()
          console.log("倒计时终止");
          return
        }
        setTimeout(function () {
          that.countdown()
        }, 1000)
      }
    },

3、发起websocket连接

收到返回数据即登录，关闭长连接，

反之图片失效，重新获取图片地址，倒计时。