Vue implementiert grafischen Überprüfungscode

<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: 18
      },
      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: 111
      },
      Inhaltshöhe: {
        Typ: Nummer,
        Standard: 38
      }
    },
    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) {
        sei r = diese.Zufallszahl(min, max)
        sei g = diese.Zufallszahl(min, max)
        sei b = diese.Zufallszahl(min, max)
        gibt 'rgb(' + r + ',' + g + ',' + b + ')' zurück
      },
      zeichneBild() {
        let Leinwand = Dokument.getElementById('s-canvas')
        lass ctx = canvas.getContext('2d')
        ctx.textBaseline = "unten"
        // Zeichne den Hintergrund ctx.fillStyle = this.randomColor(this.backgroundColorMin, this.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)
        }
        // this.drawLine(ctx) // Interferenzlinie zeichnen // this.drawDot(ctx) // Interferenzpunkt zeichnen},
      // Text zeichnen drawText(ctx, txt, i) {
        ctx.fillStyle = diese.randomColor(diese.colorMin, diese.colorMax)
        ctx.font = diese.randomNum(diese.fontSizeMin, diese.fontSizeMax) + 'px SimHei'
        sei x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
        sei y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)
        var deg = this.randomNum(-30, 30) // Zeichendrehwinkel (vorzugsweise nicht mehr als 45 Grad)
        // Koordinatenursprung und Drehwinkel ändern ctx.translate(x, y)
        ctx.rotate(Grad * Math.PI / 180)
        ctx.fillText(txt, 0, 0)
        // Koordinatenursprung und Drehwinkel wiederherstellen ctx.rotate(-deg * Math.PI / 180)
        ctx.translate(-x, -y)
      },
      zeichneLinie(ctx) {
        // Zeichne Interferenzlinien für (let i = 0; i < 8; i++) {
          ctx.strokeStyle = diese.randomColor(diese.lineColorMin, diese.lineColorMax)
          ctx.beginPath()
          ctx.moveTo(diese.randomNum(0, diese.Inhaltsbreite), diese.randomNum(0, diese.Inhaltshöhe))
          ctx.lineTo(diese.randomNum(0, diese.Inhaltsbreite), diese.randomNum(0, diese.Inhaltshöhe))
          ctx.stroke()
        }
      },
      Punkt zeichnen(ctx) {
        // Zeichne Interferenzpunkte für (let i = 0; i < 100; i++) {
          ctx.fillStyle = diese.randomColor(0, 255)
          ctx.beginPath()
          ctx.arc(diese.randomNum(0, diese.Inhaltsbreite), diese.randomNum(0, diese.Inhaltshöhe), 1, 0, 2 * Math.PI)
          ctx.fill()
        }
      }
    },
    betrachten:
      identifiziereCode() {
        dieses.drawPic()
      }
    },
    montiert() {
      dieses.drawPic()
    }
  }
</Skript>

<Vorlage>
  <div>
    <div>Verifizierungscode-Test</div>
    <div @click="refreshCode()" class="code" style="cursor:pointer;" title="Klicken, um den Bestätigungscode zu wechseln">
      <s-identify :identifyCode="identifyCode"></s-identify>
    </div>
  </div>
</Vorlage>

<Skript>
importiere { defineComponent } von „vue“;
importiere sIdentify aus "@/common/sIdentify.vue";
// importiere Axios von „Axios“
exportiere StandarddefiniereKomponente({
  Name: 'WasserzeichenTest',
  Komponenten: { sIdentify },
  Daten() {
    zurückkehren {
      Identifizierungscode: "",
      identifyCodes: ['0','1','2','3','4','5','6','7','8','9','a','b','c','d'], //Fügen Sie die gewünschten Zeichen entsprechend dem tatsächlichen Bedarf hinzu}
  },
  montiert() {
    dies.refreshCode()
 },
 nicht eingehängt() {

 },
  Methoden: {
    // Zufallszahl generieren randomNum(min, max) {
      max = max + 1
      gibt Math.floor(Math.random() * (max - min) + min) zurück;
    },
    // Prüfcode aktualisieren refreshCode() {
      dieser.identifyCode = "";
      dies.makeCode(dies.identifyCodes, 4);
      console.log('Aktueller Bestätigungscode:',this.identifyCode);
    },
    // Verifizierungscode zufällig generieren string makeCode(data, len) {
      console.log('Daten, Länge:', Daten, Länge)
      für (sei i = 0; i < len; i++) {
        dieser.identifyCode += dieser.identifyCodes[diese.randomNum(0, dieser.identifyCodes.length-1)]
      }
    },
  },
});
</Skript>