欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

.Net Core 实现图片验证码的实现示例

程序员文章站 2022-03-21 12:41:30
记录自己的学习,参考了网上各位大佬的技术,往往在登录的时候需要使用到验证码来进行简单的一个校验,这边使用在.net core上进行生成图片二维码思路很简单=》 生成一个随机数-》保存到服务端sessi...

记录自己的学习,参考了网上各位大佬的技术,往往在登录的时候需要使用到验证码来进行简单的一个校验,这边使用在.net core上进行生成图片二维码

思路很简单=》 生成一个随机数-》保存到服务端session-》生成随机码对应的图片给前端-》登录的时候进行校验(也可以在后端进行随机码的token加密,存到cooick里面在前端进行校验)

第一步:生成随机数

private static string rndnum(int vcodenum)
    {
      //验证码可以显示的字符集合 
      string vchar = "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,a,b,c,d,e,f,g,h,i,j,k,l,m,n,p,p,q" +
        ",r,s,t,u,v,w,x,y,z";
      string[] vcarray = vchar.split(new char[] { ',' });//拆分成数组  
      string code = "";//产生的随机数 
      int temp = -1;//记录上次随机数值,尽量避避免生产几个一样的随机数 

      random rand = new random();
      //采用一个简单的算法以保证生成随机数的不同 
      for (int i = 1; i < vcodenum + 1; i++)
      {
        if (temp != -1)
        {
          rand = new random(i * temp * unchecked((int)datetime.now.ticks));//初始化随机类 
        }
        int t = rand.next(61);//获取随机数 
        if (temp != -1 && temp == t)
        {
          return rndnum(vcodenum);//如果获取的随机数重复,则递归调用 
        }
        temp = t;//把本次产生的随机数记录起来 
        code += vcarray[t];//随机数的位数加一 
      }
      return code;
    }

第二步:生成验证码图片

public static memorystream create(out string code, int numbers = 4)
    {
      code = rndnum(numbers);
      //bitmap img = null;
      //graphics g = null;
      memorystream ms = null;
      random random = new random();
      //验证码颜色集合 
      color[] c = { color.black, color.red, color.darkblue, color.green, color.orange, color.brown, color.darkcyan, color.purple };

      //验证码字体集合
      string[] fonts = { "verdana", "microsoft sans serif", "comic sans ms", "arial", "宋体" };


      using (var img = new bitmap((int)code.length * 18, 32))
      {
        using (var g = graphics.fromimage(img))
        {
          g.clear(color.white);//背景设为白色

          //在随机位置画背景点 
          for (int i = 0; i < 100; i++)
          {
            int x = random.next(img.width);
            int y = random.next(img.height);
            g.drawrectangle(new pen(color.lightgray, 0), x, y, 1, 1);
          }
          //验证码绘制在g中 
          for (int i = 0; i < code.length; i++)
          {
            int cindex = random.next(7);//随机颜色索引值 
            int findex = random.next(5);//随机字体索引值 
            font f = new font(fonts[findex], 15, fontstyle.bold);//字体 
            brush b = new solidbrush(c[cindex]);//颜色 
            int ii = 4;
            if ((i + 1) % 2 == 0)//控制验证码不在同一高度 
            {
              ii = 2;
            }
            g.drawstring(code.substring(i, 1), f, b, 3 + (i * 12), ii);//绘制一个验证字符 
          }
          ms = new memorystream();//生成内存流对象 
          img.save(ms, imageformat.jpeg);//将此图像以png图像文件的格式保存到流中 
        }
      }

      return ms;
    }

第三步:控制器调用方法生成随机数图片之后,进行随机数的保存

 httpcontext.session.setstring("loginvalidatecode", code);

备注:在使用session的时候要进行session服务的注册

在configureservices中services.addsession();

在configure中app.usesession();

最后在前端进行验证码图片的绑定

<img style="justify-content:center" id="code" src="/users/login/getverifycode" />

点击图片进行验证码刷新

.Net Core 实现图片验证码的实现示例

function getcode() {
    $.ajax({
      type: "get",
      url: "/users/login/getverifycode",
      data: {},
      datatype: "json",
      success: function (data) {
      },
      complete: function () {
        $("#code").attr('src', '/users/login/getverifycode')
      }
    });
  }

skiasharp

这个百度上的搜索结果没有一个是给了可用代码的。ε=(´ο`*)))唉 而且大部分都是一个人放出来的代码 好吧开始自己整。先上代码

public iactionresult code()
    {
      #region 反射sk支持的全部颜色
      //list<skcolor> colors = new list<skcolor>();      
      //var skcolors = new skcolors();
      //var type = skcolors.gettype();
      //foreach (fieldinfo field in type.getfields())
      //{
      //  colors.add( (skcolor)field.getvalue(skcolors));
      //}
      #endregion

      //int maxcolorindex = colors.count-1;
      string text = "1a3v";
      var zu = text.tolist();
      skbitmap bmp = new skbitmap(80, 30);
      using (skcanvas canvas = new skcanvas(bmp))
      {
        //背景色
        canvas.drawcolor(skcolors.white);
        
        using (skpaint skpaint = new skpaint())
        {         
          skpaint.textsize = 16;//字体大小
          skpaint.isantialias = true;//开启抗锯齿          
          skpaint.typeface = sktypeface.fromfamilyname("微软雅黑", sktypefacestyle.bold);//字体
          skrect size = new skrect();
          skpaint.measuretext(zu[0].tostring(), ref size);//计算文字宽度以及高度
          
          float temp = (bmp.width/4 - size.size.width)/2;
          float temp1 = bmp.height - (bmp.height - size.size.height) / 2;         
          random random = new random();
         
          for (int i = 0; i < 4; i++)
          {
            
            skpaint.color = new skcolor((byte)random.next(0,255), (byte)random.next(0, 255), (byte)random.next(0, 255));           
            canvas.drawtext(zu[i].tostring(), temp + 20*i, temp1, skpaint);//画文字
          }   
          //干扰线
          for (int i = 0; i < 5; i++)
          {
            skpaint.color = new skcolor((byte)random.next(0, 255), (byte)random.next(0, 255), (byte)random.next(0, 255));           
            canvas.drawline(random.next(0, 40), random.next(1, 29), random.next(41, 80), random.next(1, 29), skpaint);
          }
        }       
        //页面展示图片
        using (skimage img = skimage.frombitmap(bmp))
        {
          using (skdata p = img.encode())
          {
            return file(p.toarray(), "image/png");
          }
        }
      }
    }

到此这篇关于.net core 实现图片验证码的实现示例的文章就介绍到这了,更多相关.net core 图片验证码内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!

出处:https://www.cnblogs.com/net-open/