Vue implementiert Bildverifizierungscode beim Anmelden

<Vorlage>
  <div Klasse="s-canvas">
    <canvas id="s-canvas" :width="Inhaltsbreite" :height="Inhaltshöhe"></canvas>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Name: 'SIdentify',
  Requisiten: {
    Identifizierungscode:
      Typ: Zeichenfolge,
      Standard: „1234“
    },
    SchriftgrößeMin: {
      Typ: Nummer,
      Standard: 28
    },
    SchriftgrößeMax: {
      Typ: Nummer,
      Standard: 40
    },
    HintergrundFarbeMin: {
      Typ: Nummer,
      Standard: 180
    },
    HintergrundFarbeMax: {
      Typ: Nummer,
      Standard: 240
    },
    FarbeMin:
      Typ: Nummer,
      Standard: 50
    },
    FarbeMax: {
      Typ: Nummer,
      Standard: 160
    },
    LinienfarbeMin: {
      Typ: Nummer,
      Standard: 40
    },
    ZeilenfarbeMax: {
      Typ: Nummer,
      Standard: 180
    },
    PunktFarbeMin: {
      Typ: Nummer,
      Standard: 0
    },
    PunktFarbeMax: {
      Typ: Nummer,
      Standard: 255
    },
    Inhaltsbreite: {
      Typ: Nummer,
      Standard: 112
    },
    Inhaltshöhe: {
      Typ: Nummer,
      Standard: 40
    }
  },
  Methoden: {
    // Erzeuge eine Zufallszahl randomNum (min, max) {
      gibt Math.floor(Math.random() * (max - min) + min) zurück
    },
    // Erzeuge eine zufällige Farbe randomColor (min, max) {
      var r = diese.randomNum(min, max)
      var g = diese.randomNum(min, max)
      var b = diese.randomNum(min, max)
      gibt 'rgb(' + r + ',' + g + ',' + b + ')' zurück
    },
    zeichneBild() {
      var Leinwand = document.getElementById('s-canvas')
      var ctx = canvas.getContext('2d')
      ctx.textBaseline = "unten"
      // Zeichne den Hintergrund ctx.fillStyle = this.randomColor(
        dies.backgroundColorMin,
        dies.backgroundColorMax
      )
      ctx.fillRect(0, 0, diese.Inhaltsbreite, diese.Inhaltshöhe)
      // Text zeichnen für (let i = 0; i < this.identifyCode.length; i++) {
        dies.drawText(ctx, dies.identifyCode[i], i)
      }
      dies.drawLine(ctx)
      dies.drawDot(ctx)
    },
    zeichneText (ctx, txt, i) {
      ctx.fillStyle = diese.randomColor(diese.colorMin, diese.colorMax)
      ctx.Schriftart =
        diese.randomNum(diese.fontSizeMin, diese.fontSizeMax) + 'px SimHei'
      var x = (i + 1) * (diese.Inhaltsbreite / (diese.IdentifyCode.Länge + 1))
      var y = diese.randomNum(diese.fontSizeMax, diese.contentHeight - 5)
      var deg = diese.randomNum(-30, 30)
      // Koordinatenursprung und Drehwinkel ändern ctx.translate(x, y)
      ctx.rotate(Grad * Math.PI / 270)
      ctx.fillText(txt, 0, 0)
      // Koordinatenursprung und Drehwinkel wiederherstellen ctx.rotate(-deg * Math.PI / 270)
      ctx.translate(-x, -y)
    },
    zeichneLinie (ctx) {
      // Interferenzlinien zeichnen für (let i = 0; i < 2; i++) {
        ctx.strokeStyle = diese.randomColor(
          diese.lineColorMin,
          diese.lineColorMax
        )
        ctx.beginPath()
        ctx.moveTo(
          diese.randomNum(0, diese.contentWidth),
          diese.randomNum(0, diese.contentHeight)
        )
        ctx.lineTo(
          diese.randomNum(0, diese.contentWidth),
          diese.randomNum(0, diese.contentHeight)
        )
        ctx.stroke()
      }
    },
    Punkt zeichnen (ctx) {
      // Interferenzpunkte zeichnen für (let i = 0; i < 20; i++) {
        ctx.fillStyle = diese.randomColor(0, 255)
        ctx.beginPath()
        ctx.arc(
          diese.randomNum(0, diese.contentWidth),
          diese.randomNum(0, diese.contentHeight),
          1,
          0,
          2 * Math.PI
        )
        ctx.fill()
      }
    }
  },
  betrachten:
    identifizierungscode () {
      dieses.drawPic()
    }
  },
  montiert () {
    dieses.drawPic()
  }
}
</Skript>
<Stil lang='less' scoped>
.s-Leinwand {
    Höhe: 38px;
}
.s-canvas Leinwand{
    Rand oben: 1px;
    Rand links: 8px;
}
</Stil>

<Vorlage>
 <span @click="refreshCode" style="cursor: pointer;">
  <s-identify :identifyCode="identifyCode" ></s-identify>
 </span>
</Vorlage>

<Skript>
// Importieren Sie die Bildüberprüfungscodekomponente import SIdentify von '@/components/identify'
Standard exportieren {
 Komponenten: { SIdentify },
 Daten() {
  zurückkehren {
   // Bildüberprüfungscode identifyCode: '',
   // Verifizierungscoderegeln identifyCodes: '3456789ABCDEFGHGKMNPQRSTUVWXY',
  }
 },
 Methoden: {
  // Bestätigungscode wechseln refreshCode() {
   this.identifyCode = ''
   dies.makeCode(diese.identifyCodes, 4)
     },
  // Erzeuge einen zufälligen Verifizierungscode makeCode(o, l) {
    für (sei i = 0; i < l; i++) {
      dieser.identifizierenCode += dieser.identifizierenCodes[
        Math.floor(Math.random() * (this.identifyCodes.length - 0) + 0)
      ]
    }
  },
 }
}
</Skript>