edu-textbook/projects/textbook/src/app/captcha/captcha.component.ts

import {
  Component,
  OnInit,
  Input,
  Output,
  EventEmitter,
  ViewChild,
  ElementRef,
} from "@angular/core";
import { CommonModule } from "@angular/common";
import { FormsModule } from "@angular/forms";
import { NzInputModule } from 'ng-zorro-antd/input';

@Component({
  imports:[CommonModule,FormsModule,NzInputModule],
  standalone:true,
  selector: 'fm-captcha',
  templateUrl: './captcha.component.html',
  styleUrls: ['./captcha.component.scss']
})
export class CaptchaComponent implements OnInit {
    @ViewChild("canvasDom") canvasDom: ElementRef | any; //本地校验码绘画

    @Input() type: string = 'input';  //default & input 默认input方式
    @Input() canvas_id: string = 'canvasCode'; //元素id
    @Input() drawCode: Array<string> = []; //验证码数组
    @Input() vCode: string = ''; //用户输入code
    @Output() changeVal: EventEmitter<any> = new EventEmitter(); //改变时触发
    @Output() onEnter: EventEmitter<any> = new EventEmitter(); //enter按下触发
    code:string = ''
    constructor() {}
  
    ngOnInit() {}
    ngAfterViewInit(): void {
      //Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
      //Add 'implements AfterViewInit' to the class.
      this.updateDrawCode();
    }
    updateDrawCode() {
      let canvas_width = 100;
      let canvas_height = 38;
      let canv = document.getElementById(this.canvas_id);
      canv && this.canvasDom.nativeElement.removeChild(canv);
      let _a = document.getElementById(this.canvas_id + '_a');
      _a && this.canvasDom.nativeElement.removeChild(_a);
      this.canvasDom.nativeElement;
      let canvas = document.createElement("canvas");
      canvas.className = "canvas";
      canvas.setAttribute("id", this.canvas_id);
      canvas.addEventListener("click", () => {
        this.updateDrawCode();
      });
      let context:any = canvas.getContext("2d"); //获取到canvas画图的环境，演员表演的舞台
      canvas.width = canvas_width;
      canvas.height = canvas_height;
      let sCode =
        "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0,q,w,e,r,t,y,u,i,o,p,a,s,d,f,g,h,j,k,l,z,x,c,v,b,n,m";
      let aCode = sCode.split(",");
      let aLength = aCode.length; //获取到数组的长度
      for (let i = 0; i <= 3; i++) {
        let j = Math.floor(Math.random() * aLength); //获取到随机的索引值
        let deg = (Math.random() * 30 * Math.PI) / 180; //产生0~30之间的随机弧度
        let txt = aCode[j]; //得到随机的一个内容
        this.drawCode[i] = txt;
        let x = 10 + i * 20; //文字在canvas上的x坐标
        let y = 20 + Math.random() * 8; //文字在canvas上的y坐标
        context.font = "bold 23px 微软雅黑";
  
        context.translate(x, y);
        context.rotate(deg);
  
        context.fillStyle = this.randomColor();
        context.fillText(txt, 0, 0);
  
        context.rotate(-deg);
        context.translate(-x, -y);
      }
      for (let i = 0; i <= 5; i++) {
        //验证码上显示线条
        context.strokeStyle = this.randomColor();
        context.beginPath();
        context.moveTo(
          Math.random() * canvas_width,
          Math.random() * canvas_height
        );
        context.lineTo(
          Math.random() * canvas_width,
          Math.random() * canvas_height
        );
        context.stroke();
      }
      for (let i = 0; i <= 30; i++) {
        //验证码上显示小点
        context.strokeStyle = this.randomColor();
        context.beginPath();
        let x = Math.random() * canvas_width;
        let y = Math.random() * canvas_height;
        context.moveTo(x, y);
        context.lineTo(x + 1, y + 1);
        context.stroke();
      }
      this.code = this.drawCode.join("")
      this.changeVal.emit({
       code:this.code,
       vCode:this.vCode
      });
      this.canvasDom.nativeElement.appendChild(canvas);
      let a = document.createElement("a");
      a.setAttribute("id", this.canvas_id + '_a');
      a.innerText = "看不清，换一张";
      a.addEventListener("click", () => {
        this.updateDrawCode();
      });
      this.canvasDom.nativeElement.appendChild(a);
    }
    /* 得到随机的颜色值 */
    randomColor() {
      let r = Math.floor(Math.random() * 256);
      let g = Math.floor(Math.random() * 256);
      let b = Math.floor(Math.random() * 256);
      return "rgb(" + r + "," + g + "," + b + ")";
    }
    //按下确认键触发
    enter(e:any) {
      if (e.keyCode == 13) {
        this.changeVal.emit({
          code:this.code,
          vCode:this.vCode
        });
        this.onEnter.emit()
      }
    }
    onChange(){
      this.changeVal.emit({
        code:this.code,
        vCode:this.vCode
      });
    }
  }