绘制微信小程序验证码功能的实例代码

2023-07-07 05:18:03 347

1.在utils文件中新建mcaptcha.js文件，写入以下代码：

module.exports=classMcaptcha{
//画板
constructor(options){
this.options=options;
this.fontSize=options.height*3/4;
this.init();
this.refresh(this.options.code);
}
init(){
this.ctx=wx.createCanvasContext(this.options.el);
this.ctx.setTextBaseline("middle");
this.ctx.setFillStyle(this.randomColor(180,240));
this.ctx.fillRect(0,0,this.options.width,this.options.height);
}
//绘制彩图
refresh(code){
letarr=(code+'').split('');
letwidth=this.options.width;
letheight=this.options.height;
letctx=this.ctx;
if(arr.length===0){
arr=['e','r','r','o','r'];
};
letoffsetLeft=width*0.6/(arr.length-1);
letmarginLeft=width*0.2;
arr.forEach((item,index)=>{
ctx.setFillStyle(this.randomColor(0,180));
letsize=this.randomNum(24,this.fontSize);
ctx.setFontSize(size);
letdis=offsetLeft*index+marginLeft-size*0.3;
letdeg=this.randomNum(-30,30);
ctx.translate(dis,height*0.5);
ctx.rotate(deg*Math.PI/180);
ctx.fillText(item,0,0);
ctx.rotate(-deg*Math.PI/180);
ctx.translate(-dis,-height*0.5);
})
//绘制干扰线
for(vari=0;i<2;i++){
	ctx.strokeStyle=this.randomColor(40,180);
	ctx.beginPath();
	ctx.moveTo(this.randomNum(0,width),this.randomNum(0,height));
	ctx.lineTo(this.randomNum(20,width),this.randomNum(2,height));
	ctx.stroke();
}
//绘制干扰点
for(vari=0;i<30;i++){
	ctx.fillStyle=this.randomColor(0,255);
	ctx.beginPath();
	ctx.arc(this.randomNum(0,width),this.randomNum(0,height),1,0,2*Math.PI);
	ctx.fill();
	}
ctx.draw();
}
//设置随机数的颜色
randomNum(min,max){
returnMath.floor(Math.random()*(max-min)+min);
}
randomColor(min,max){
letr=this.randomNum(min,max);
letg=this.randomNum(min,max);
letb=this.randomNum(min,max);
return"rgb("+r+","+g+","+b+")";
}
}

2.在需要验证码的js文件中引入

letMcaptcha=require("../../../utils/mcaptcha.js");

res.data是要传到mcaptcha.js中的code值，也就是验证码，可以随意写为如：“ho55”，“a2sd”等等。我这里是从后台传过来的数据，（前人写的代码，不好改动，只在前端加上干扰线和彩图）。

newMcaptcha({
el:'canvas',
width:100,
height:30,
code:res.data
});

wxml文件，bindtap="getImgYZM"是newMcaptcha的方法名，再次点击可以换验证码图片。

如果是在前端设置随机数，可以在data:{}里面写

data:{
str:"0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,G,H,I,J,K,L,M,N,P,Q,R,S,T,U,V,W,X,Y,Z",
randStr:""
}
//获取随机数
varres="";
for(vari=0;i
这一步可不看，以下是后端C#语言产生随机数返给前端的代码：
usingJobClass;
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Drawing;
usingSystem.Linq;
usingSystem.Web;
usingSystem.Web.SessionState;

namespaceWebSite.pcode
{
///
///getcode的摘要说明
///
publicclassgetcode:IHttpHandler,IRequiresSessionState
{
publicvoidProcessRequest(HttpContextcontext)
{
context.Response.ContentType="text/plain";
stringstr="0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,G,H,I,J,K,L,M,N,P,Q,R,S,T,U,V,W,X,Y,Z";
stringrandStr="";
//生成随机数Random
Randomrandobj=newRandom();
string[]arr=str.Split(',');
for(inti=0;i<4;i++)
{
randStr+=arr[randobj.Next(arr.Length)];
}
context.Response.Write(randStr);
return;
}
publicboolIsReusable
{
get
{
returnfalse;
}
}
}
}
到此这篇关于绘制微信小程序验证码功能的实例代码的文章就介绍到这了,更多相关微信小程序验证码内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

绘制微信小程序验证码功能的实例代码

热门推荐

随机推荐