鸿蒙arkts api9 图片验证码 canvas

/**
 * 图片验证码
 *
 *
 */
@Component
export default struct  RandomTxtCanvas {
  @Link imgRandomTxt:string
  //图片验证
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(200,200, this.settings)
  aboutToAppear(){
  this.imgRandomTxt=this.generateRandomCode(4)
}
//随机码
  generateRandomCode(length) {
    var result = '';
    var characters = 'ABCDEFGHIJKLMNPQRSTUVWXYZabcdefghijklmnpqrstuvwxyz123456789';
    var charactersLength = characters.length;
    for (var i = 0; i < length; i++) {
      result += characters.charAt(Math.floor(Math.random() * charactersLength));
    }
    return result;
  }
  //绘制图片
  getImage()
  {
    console.info(`validate:${this.imgRandomTxt}` )
    let colors=['#ed7272','#d9c529','#38649d','#000']
    let arr=this.imgRandomTxt.split('')
    for(var i=0;i<arr.length;i++) {
      let xMargin=this.getRandomNumber(1,10);
      let y=this.getRandomNumber(18,38);
      let x=xMargin+i*25+10
      this.offContext.font = `${this.getRandomNumber(50,70)}px sans-serif`
      this.offContext.fillText(arr[i], x,y,60)
      this.offContext.fillStyle=colors[this.getRandomNumber(0,3)]
    }

    this.offContext.lineWidth = 1
    this.offContext.moveTo(this.getRandomNumber(20, 40),this.getRandomNumber(20, 40))
    this.offContext.lineTo(120,this.getRandomNumber(5,40))
    this.offContext.moveTo(this.getRandomNumber(50, 110), this.getRandomNumber(5,40))
    let y=this.getRandomNumber(0, 40);
    this.offContext.bezierCurveTo(0, y, 200, 100, y, 200)
    this.offContext.moveTo(this.getRandomNumber(0, 30),this.getRandomNumber(0, 20))
    this.offContext.lineTo(this.getRandomNumber(80,120),this.getRandomNumber(10,40))

    this.offContext.lineJoin = 'miter'
    this.offContext.strokeStyle = '#ed7272'
    this.offContext.moveTo(this.getRandomNumber(0, 40),10)
    this.offContext.lineTo(this.getRandomNumber(50, 110), 60)
    this.offContext.lineTo(this.getRandomNumber(50, 110), 30)
    this.offContext.stroke()
    var image = this.offContext.transferToImageBitmap()
    this.context.transferFromImageBitmap(image)

  }
//清空画布
  clearCanvas(){
    this.offContext.clearRect(0,0,500,500)
    this.offContext = new OffscreenCanvasRenderingContext2D(200,200, this.settings)
    this.context.clearRect(0,0,500,500)
  }
//随机数
  getRandomNumber(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }



  build() {
    Column() {
      Canvas(this.context)
        .width(120)
        .height('40')
        .backgroundColor('#fff')
        .onReady(() =>{
          this.getImage()
        })
        .onClick(()=>{
          this.clearCanvas()
          this.imgRandomTxt=this.generateRandomCode(4)
          this.getImage()
        })
    }
  }
}

使用

//import RandomTxtCanvas from ''引用组件

@State imgRandomTxt:string=''

RandomTxtCanvas({imgRandomTxt:$imgRandomTxt})