Realization of ASP-point-selected verification code

haha for a long time did not bubble, the most in See point select Verification code a little meaning, so want to write a.

First on

If you are attracted to this effect, please keep looking.

Before pasting the code to say a little bit of thought:

1. To have a Chinese character library, and classification by glyph. (I am an radicals category in the database)

2. Get the verification code (that is, take a few words to verify the code)

3. According to the text taken out to find the shape near the word

4. Arrange captcha text and shape near word

5. Drawing pictures

6. Display

First, access to the font

Chinese culture is extensive and profound, where is the word of spicy? Of course, I can not manually add, so I found a random on the Internet to check the Chinese characters of the website, to catch other people's data. The method of grasping the data please point the portal. The portal is just thinking, if you do not understand, please AI. I will share my font below.

Second, obtain the verification code

This is relatively simple here I directly paste the code, the following code is randomly sorted after taking 4 data, I write this is to facilitate the diagram. Personally think that the first random generation of ID, and then directly based on the ID data, so that the query speed than the following writing faster. (Note that the database I use is MySQL)

<summary>///Get Verification Code///</summary>public list<verificationcode.model.wenzhi> GetCodeText () { const String sql = "SELECT * from Wenzhi ORDER by RAND () LIMIT 4"; var dataReader = dbhelper.getdatareader (sql); var list = datareadertolist (DataReader); Datareader.close (); return list;}

Third, according to the text taken out to find the shape near the word

Because the first step of the time I saved radicals, so here I directly according to the radical to get the current radicals of the shape near the word.

<summary>///Get answer Alternative//</summary>///<param name= "Bushoucode" > Radical Coding </param>///<param Name= "id" > Current text id</param>///<param name= "number" > Quantity </param>///<returns></returns >public list<verificationcode.model.wenzhi> getanswer (string bushoucode, int id,int number=1) {String sql = $ " SELECT * from Wenzhi where bushoucode= ' {Bushoucode} ' and ID <> {ID} ORDER by RAND () LIMIT "+ number; var dataReader = dbhelper.getdatareader (sql); var list = datareadertolist (DataReader); Datareader.close (); return list;}

Four. Arrange captcha text and shape near word

The following code first puts the alternative answer and validation in a collection and then sorts the set

Public Model.code GetCode () {var wenzlist = _wenzhidal.getcodetext ();//Get verification code var LISTANSUWR = new List<answer&gt ;();//Instantiate alternate answer object var Answercode = string. empty;//answer var result = new Model.code {Id = Guid.NewGuid ().  ToString ()};   Obtain an alternative answer based on the verification code and add the add to answer to the alternate answer set foreach (var item in wenzlist) {Answercode + = Item.id + ","; Result. Answervalue + = Item.   Text; var answerlist = _wenzhidal.getanswer (item.   Bushoucode, item.id); Listansuwr.add (new Answer {Id = item.id. ToString (), IMG = GetImage (item.   Text)}); Listansuwr.addrange (answerlist.select (answer = new Answer {Id = answer.id. ToString (), Img = GetImage (answer.  Text)});   }//If the number of answers is insufficient, then go to fetch a few if (Listansuwr.count < 9) {var ran = new Random (); var Randkey = ran.   Next (0, 4);   var item = Wenzlist[randkey]; var answerlist = _wenzhidal.getanswer (item.   Bushoucode, Item.id, 9-listansuwr.count); Listansuwr.addrange (answerlist.select (answer = new Answer {Id = answer.id. ToString (), Img = GetImage (answer.  Text)}); } result. Codeimg = GetImage (result. Answervalue);//Get picture result.  Answervalue = Answercode.trimend (', '); Result. Answer = Randomsortlist (LISTANSUWR);//Disturb the correct answer and form the order of the near word return result; }

This is the code for sorting the collection

<summary>///randomly arranged collection//</summary>///<typeparam name= "T" ></typeparam>///<param name= " Listt "></param>///<returns></returns>private static list<t> RandomSortList<T> ( Ienumerable<t> listt) {var random = new Random (), var newlist = new list<t> (); foreach (var item in LISTT) {
  newlist.insert (random. Next (Newlist.count + 1), item); } return newlist;}

Five, drawing pictures

Here is the code for the drawing, the verification code and the alternative answer correspond to two different representations (the comments are written in the clear). Do not worry about the text rotation x° after the human separation, haha. The last sentence of the code I turned the picture into a Base64, convenient for front-end invocation.

private static string GetImage (string text) {image Image; Switch (text.     Length) {Case 1:image = new Bitmap (50, 40);    Break     Case 4:image = new Bitmap (120, 40);    Break     Default:image = new Bitmap (50, 40);   Break   } Brush Brushtext = new SolidBrush (Color.FromArgb (255, 0, 0, 0));   var graphics = graphics.fromimage (image); Graphics.   SmoothingMode = Smoothingmode.antialias; Graphics.   Clear (Color.White);   var font = new Font (new FontFamily ("Chinese Choi"), fontstyle.regular); if (text. Length > 1)//Draw Verification Code {///first two lines to disturb then draw text graphics. DrawLine (New Pen (Brushtext, New Random (). Next (1, 3)), New Point (New Random (). Next (0, ten), New Random (). Next (Ten)), New Point (New Random (). Next (+), new Random ().    Next (10, 30)); Graphics. DrawLine (New Pen (Brushtext, New Random (). Next (1, 3)), New Point (New Random (). Next (+), new Random (). Next (0, ten)), New Point (New Random (). Next (+), new Random ().    Next (30, 40)); Graphics. DrawString (TexT, font, Brushtext, 0, 10);    } else//to draw an alternative answer {point middle = new Point (25, 20); Graphics. TranslateTransform (middle. X, middle.    Y); Here is a 360° random rotation graphics. RotateTransform (New Random ().    Next (0, 360)); var format = new StringFormat (stringformatflags.noclip) {Alignment = Stringalignment.center, linealignment = S    Tringalignment.center}; Graphics.    DrawString (text, font, brushtext, 0, 0, format);   } brushtext.dispose (); Graphics.   Dispose ();  return ImageToBase64 (image); }

Vi. Display

Call the GetCode method directly to return the Captcha object

Here is the background code, should be the correct answer is placed in the Answervalue, so I first put out to put in the session, then the value is emptied and then returned to the browser via JSON.

public string Getvercode () {var code = new Verificationcode.code (). GetCode (); session["Vercode"] = code. Answervalue; Code. Answervalue = ""; return Jsonconvert.serializeobject (code);}

Now let's heap up some HTML code

<div class= "Form-group" > <ul class= "Vercode" > <li></li> <li></li> <li></li> &      Lt;li></li> <li class=" delete "onclick=" Delete_input () "></li> </ul> <div>  <a href= "javascript:void (0);" onclick= "Load_vercode ()" > unclear? </a> </div> <ul class= "Vercode-anwser" > <li></li> <li>& Lt;img/></li> <li></li> <li></li> <li>< ; IMG/></li> <li></li> <li></li> <li><i MG/></li> <li></li> </ul> </div> 

A bit more JS code, here only to achieve the effect of the picture, not to verify the data (here is the verification idea: each image corresponds to an ID, the ID of the selected image is separated by a comma, and then compared with the value in the session)

<script>  $ (function () {   //Load Verification code   Load_vercode ();   Bind Captcha Click event   $ (". Vercode-anwser"). FIND ("img"). ON ("click", NULL, function () {    $ (". Vercode"). Find ("img[src=" ']:eq (0) '). attr ("src", $ (this). attr ("src"));   }   ); function Load_vercode () {   $ (". Vercode"). FIND ("img"). attr ("src", "");   $.get ("Getvercode", function (data) {    var result = json.parse (data);    $ ("#code-image"). attr ("src", "data:image/png;base64," + result.) CODEIMG);    $ (". Vercode-anwser"). FIND ("img"). each (the function (index) {     $ (this). attr ("src", "data:image/png;base64," + result . Answer[index]. (IMG)  ;});}); Delete Event  function Delete_input () {   $ (". Vercode"). Find ("img[src!= ']:last"). attr ("src", "");  } </script>

Here the code is almost, the above thinking is just a simple personal idea, interested friends to discuss it together.

The above is the whole content of this article, I hope that everyone's learning has helped, but also hope that we support topic.alibabacloud.com.