angular7+实现前端生成验证码 canvas画图

最新推荐文章于 2024-08-31 09:03:41 发布

故之

最新推荐文章于 2024-08-31 09:03:41 发布

阅读量822

点赞数 1

分类专栏： angualr7学习笔记文章标签： canvas angular2

本文链接：https://blog.csdn.net/Orz3261/article/details/109048367

版权

本文介绍了如何在Angular7+项目中利用canvas实现前端生成验证码的功能。在实现过程中，遇到了`getContext`不是一个函数的错误。解决办法是通过ViewChild获取canvas元素时指定类型为HTMLCanvasElement，然后使用`nativeElement`调用`getContext("2d")`。参考了多个博客资源，包括CSDN和博客园的文章。

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

html：

<li class="_3001_12_verification_code" id="loginMaskLi">
    <label><input id="loginmask" type="text" placeholder="不区分大小写"> </label>
    <span (click) = "initVerifyCode()">获取验证码 </span>
    <canvas #verifyCode type="text" disabled="disabled" ></canvas>
</li>

TS:

import { Component,  ElementRef,  OnInit, ViewChild } from '@angular/core';


@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  
  @ViewChild ('verifyCode') verifyCode: ElementRef;
  constructor(private el:ElementRef) { }
  public showAuthCode: string;
  public verifyCodeLine: number = 8;
  pu