JS如何实现图片验证码功能
导读：本文共3110字符，通常情况下阅读需要10分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 1. html代码<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%><html><head><metahttp-equiv="Cont... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。1. html代码
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><scriptsrc="<%=request.getContextPath()%>/js/gVerify.js"></script><styletype="text/css">body,html{width:100%;text-align:center;}#picyzm{width:100px;height:40px;display:inline-block;margin:030px;}#verifyCodeDemo{width:100%;display:flex;margin-top:200px;justify-content:center;}#btn{margin:30pxauto;background-color:blue;color:#fff;border-radius:5px;border:0;width:100px;height:40px;}</style></head><body><divid="verifyCodeDemo"><inputtype="text"id="code_input"placeholder="在这个框里输入验证码"><pid="picyzm"></p></div><inputtype="button"value="验证"id="btn"><scripttype="text/javascript">//初始化验证码varverifyCode=newGVerify({id:"picyzm",type:"blend"});//点击按钮验证varcode=document.getElementById("code_input");varbtn=document.getElementById("btn");btn.onclick=function(){varres=verifyCode.validate(code.value);if(res){alert("验证通过");}else{alert("验证码错误");}}</script></body></html>2. 引入gVerify.js
!(function(window,document){functionGVerify(options){//创建一个图形验证码对象，接收options对象为参数this.options={//默认options参数值id:"",//容器IdcanvasId:"verifyCanvas",//canvas的IDwidth:"100",//默认canvas宽度height:"30",//默认canvas高度type:"blend",//图形验证码默认类型blend:数字字母混合类型、number:纯数字、letter:纯字母code:""}if(Object.prototype.toString.call(options)=="[objectObject]"){//判断传入参数类型for(variinoptions){//根据传入的参数，修改默认参数值this.options[i]=options[i];}}else{this.options.id=options;}this.options.numArr="0,1,2,3,4,5,6,7,8,9".split(",");this.options.letterArr=getAllLetter();this._init();this.refresh();}GVerify.prototype={/**版本号**/version:'1.0.0',/**初始化方法**/_init:function(){varcon=document.getElementById(this.options.id);varcanvas=document.createElement("canvas");this.options.width=con.offsetWidth>0?con.offsetWidth:"100";this.options.height=con.offsetHeight>0?con.offsetHeight:"30";canvas.id=this.options.canvasId;canvas.width=this.options.width;canvas.height=this.options.height;canvas.style.cursor="pointer";canvas.innerHTML="您的浏览器版本不支持canvas";con.appendChild(canvas);varparent=this;canvas.onclick=function(){parent.refresh();}},/**生成验证码**/refresh:function(){this.options.code="";varcanvas=document.getElementById(this.options.canvasId);if(canvas.getContext){varctx=canvas.getContext('2d');}else{return;}ctx.textBaseline="middle";ctx.fillStyle=randomColor(180,240);ctx.fillRect(0,0,this.options.width,this.options.height);if(this.options.type=="blend"){//判断验证码类型vartxtArr=this.options.numArr.concat(this.options.letterArr);}elseif(this.options.type=="number"){vartxtArr=this.options.numArr;}else{vartxtArr=this.options.letterArr;}for(vari=1;i<=4;i++){vartxt=txtArr[randomNum(0,txtArr.length)];this.options.code+=txt;ctx.font=randomNum(this.options.height/2,this.options.height)+'pxSimHei';//随机生成字体大小ctx.fillStyle=randomColor(50,160);//随机生成字体颜色ctx.shadowOffsetX=randomNum(-3,3);ctx.shadowOffsetY=randomNum(-3,3);ctx.shadowBlur=randomNum(-3,3);ctx.shadowColor="rgba(0,0,0,0.3)";varx=this.options.width/5*i;vary=this.options.height/2;vardeg=randomNum(-30,30);/**设置旋转角度和坐标原点**/ctx.translate(x,y);ctx.rotate(deg*Math.PI/180);ctx.fillText(txt,0,0);/**恢复旋转角度和坐标原点**/ctx.rotate(-deg*Math.PI/180);ctx.translate(-x,-y);}/**绘制干扰线**/for(vari=0;i<4;i++){ctx.strokeStyle=randomColor(40,180);ctx.beginPath();ctx.moveTo(randomNum(0,this.options.width),randomNum(0,this.options.height));ctx.lineTo(randomNum(0,this.options.width),randomNum(0,this.options.height));ctx.stroke();}/**绘制干扰点**/for(vari=0;i<this.options.width/4;i++){ctx.fillStyle=randomColor(0,255);ctx.beginPath();ctx.arc(randomNum(0,this.options.width),randomNum(0,this.options.height),1,0,2*Math.PI);ctx.fill();}},/**验证验证码**/validate:function(code){varcode=code.toLowerCase();varv_code=this.options.code.toLowerCase();if(code==v_code){returntrue;}else{returnfalse;}}}/**生成字母数组**/functiongetAllLetter(){varletterStr="a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z";returnletterStr.split(",");}/**生成一个随机数**/functionrandomNum(min,max){returnMath.floor(Math.random()*(max-min)+min);}/**生成一个随机色**/functionrandomColor(min,max){varr=randomNum(min,max);varg=randomNum(min,max);varb=randomNum(min,max);return"rgb("+r+","+g+","+b+")";}window.GVerify=GVerify;})(window,document);3. 效果图
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
JS如何实现图片验证码功能的详细内容，希望对您有所帮助，信息来源于网络。