[實戰]MVC5+EF6+MySql企業網盤實戰(2)——驗證碼

標籤：噪點   code   單擊   function   font   com   reading   label   and   

寫在前面

斷斷續續，今天算是把驗證碼的東東弄出來了。

系列文章

[EF]vs15+ef6+mysql code first方式

[實戰]MVC5+EF6+MySql企業網盤實戰(1)

[實戰]MVC5+EF6+MySql企業網盤實戰(2)——使用者註冊

[實戰]MVC5+EF6+MySql企業網盤實戰(2)——驗證碼

驗證碼類

using System;using System.Collections.Generic;using System.Drawing;using System.IO;using System.Linq;using System.Text;using System.Threading.Tasks;namespace Wolfy.NetDisk.Utilities{    /// <summary>    /// 驗證碼類    /// </summary>    public static class VerifyCode    {        /// <summary>        /// 產生驗證碼        /// </summary>        /// <param name="len">驗證碼長度</param>        /// <param name="strCode">驗證碼</param>        /// <returns>驗證碼圖片</returns>        public static byte[] Create(int len, out string strCode)        {            MemoryStream stream = new MemoryStream();            byte[] buffer = null;            //噪線 噪點            Color[] colors = { Color.Black, Color.Red, Color.Blue, Color.Green, Color.Orange, Color.Brown, Color.DarkBlue };            //驗證碼字型            string[] fonts = { "Times New Roman", "MS Mincho", "Book Antiqua", "Gungsuh", "PMingLiU", "Impact" };            //驗證碼內容            char[] charactars = { ‘1‘, ‘2‘, ‘3‘, ‘4‘, ‘5‘, ‘6‘, ‘7‘, ‘8‘, ‘9‘, ‘A‘, ‘B‘, ‘C‘, ‘D‘, ‘E‘, ‘F‘, ‘G‘, ‘H‘, ‘I‘, ‘J‘, ‘K‘, ‘L‘, ‘M‘, ‘N‘, ‘O‘, ‘P‘, ‘Q‘, ‘R‘, ‘S‘, ‘T‘, ‘U‘, ‘V‘, ‘W‘, ‘S‘, ‘Y‘, ‘Z‘ };            //產生驗證碼字串            StringBuilder sb = new StringBuilder();            Random r = new Random();            for (int i = 0; i < len; i++)            {                char codeChar = charactars[r.Next(0, charactars.Length)];                sb.Append(codeChar);            }            strCode = sb.ToString();            using (Bitmap bitmap = new Bitmap(len * 25, 35))            {                using (Graphics g = Graphics.FromImage(bitmap))                {                    g.Clear(Color.White);                    for (int i = 0; i < 10; i++)                    {                        int x1 = r.Next(100);                        int y1 = r.Next(40);                        int x2 = r.Next(100);                        int y2 = r.Next(40);                        Color color = colors[r.Next(colors.Length)];                        g.DrawLine(new Pen(color), x1, y1, x2, y2);                    }                    //將字串畫入圖片                    for (int i = 0; i < strCode.Length; i++)                    {                        string font = fonts[r.Next(fonts.Length)];                        Font fnt = new Font(font, 18);                        Color color = colors[r.Next(colors.Length)];                        g.DrawString(strCode[i].ToString(), fnt, new SolidBrush(color), (float)i * 20 + 8, (float)8);                    }                    //畫噪點                    for (int i = 0; i < 100; i++)                    {                        int x = r.Next(bitmap.Width);                        int y = r.Next(bitmap.Height);                        Color color = colors[r.Next(colors.Length)];                        bitmap.SetPixel(x, y, color);                    }                }                bitmap.Save(stream, System.Drawing.Imaging.ImageFormat.Jpeg);                buffer = stream.ToArray();            }            return buffer;        }    }}

 

在UserInfoController中添加Action

  [HttpGet]        public ActionResult VerifyCodeImage()        {            string strCode = string.Empty;            byte[] buffer = VerifyCode.Create(6, out strCode);            Session["code"] = strCode;            return File(buffer, @"image/jpeg");        }

 

註冊頁面上添加驗證碼的表單輸入框

    <div class="form-group">            <label class="control-label col-md-2">驗證碼</label>            <div class="col-md-10">                <input type="text" name="name" value=" " />  <img id="imgCode" style="cursor:pointer;" title="切換下一張" src="/UserInfo/VerifyCodeImage" alt="驗證碼" />            </div>        </div>

 

為驗證碼圖片添加單擊事件，切換下一張，為了避免緩衝，添加隨機數參數，保證每次請求是一次新的請求。

<script>    $(function () {        $("#imgCode").click(function () {            var ran = Math.random();            //加上隨機數ran，避免驗證碼緩衝。            this.src = "/UserInfo/VerifyCodeImage?_r=" + ran;        });    });   </script>

頁面測試

總結

今天比平時早回來會兒，就趁著做了一個功能，進度有點慢啊。

[實戰]MVC5+EF6+MySql企業網盤實戰(2)——驗證碼