zoukankan      html  css  js  c++  java
  • 无刷新仿google波形扭曲彩色Asp.net验证码

    网上关于Asp.net验证码的示例是在不少,前一段时间我发布的《51aspx实现的Asp.net无刷新中文验证码》受到了广大网站的转载,但是关于其中无刷新及波形扭曲的文章寥寥无几,示例也几乎难寻,于是我搜集了一些资料写了一个示例免费提供给大家,主要特点如下:

    效果图:

     无刷新:也就是一般网站都有的“看不清,点击更换”、“更换验证码”的那种功能,一段js脚本搞定!
     波形扭曲:类似google验证码,这个能更有效的防止验证码被机器人攻破,具体的扭曲程度可以自行设置(正弦曲线Wave扭曲图片产生波形滤镜效果),加加参数也可以改成msn的那种啊,自己举一反三吧!

     彩色:字符颜色都是随机的
     大小写:也是随机的,当然为了输入方便没有对大小写进行限制,也可以自己修改哦
     注释详细:各个参数都有很详细的说明,容易上手

    为了显示扭曲效果,默认字体大小为40像素,可以自行修改

    关于扭曲的源码:

     1       /// <summary>
     2        /// 正弦曲线Wave扭曲图片(Edit By 51aspx.com)
     3        /// </summary>
     4        /// <param name="srcBmp">图片路径</param>
     5        /// <param name="bXDir">如果扭曲则选择为True</param>
     6        /// <param name="nMultValue">波形的幅度倍数,越大扭曲的程度越高,一般为3</param>
     7        /// <param name="dPhase">波形的起始相位,取值区间[0-2*PI)</param>
     8        /// <returns></returns>

     9        public System.Drawing.Bitmap TwistImage(Bitmap srcBmp, bool bXDir, double dMultValue, double dPhase)
    10        {
    11            System.Drawing.Bitmap destBmp = new Bitmap(srcBmp.Width, srcBmp.Height);
    12
    13            // 将位图背景填充为白色
    14            System.Drawing.Graphics graph = System.Drawing.Graphics.FromImage(destBmp);
    15            graph.FillRectangle(new SolidBrush(System.Drawing.Color.White), 00, destBmp.Width, destBmp.Height);
    16            graph.Dispose();
    17
    18            double dBaseAxisLen = bXDir ? (double)destBmp.Height : (double)destBmp.Width;
    19
    20            for (int i = 0; i < destBmp.Width; i++)
    21            {
    22                for (int j = 0; j < destBmp.Height; j++)
    23                {
    24                    double dx = 0;
    25                    dx = bXDir ? (PI2 * (double)j) / dBaseAxisLen : (PI2 * (double)i) / dBaseAxisLen;
    26                    dx += dPhase;
    27                    double dy = Math.Sin(dx);
    28
    29                    // 取得当前点的颜色
    30                    int nOldX = 0, nOldY = 0;
    31                    nOldX = bXDir ? i + (int)(dy * dMultValue) : i;
    32                    nOldY = bXDir ? j : j + (int)(dy * dMultValue);
    33
    34                    System.Drawing.Color color = srcBmp.GetPixel(i, j);
    35                    if (nOldX >= 0 && nOldX < destBmp.Width
    36                     && nOldY >= 0 && nOldY < destBmp.Height)
    37                    {
    38                        destBmp.SetPixel(nOldX, nOldY, color);
    39                    }

    40                }

    41            }

    42
    43            return destBmp;
    44        }

    45

    关于无刷新的问题我找了很多文章都很复杂,后来想到了一个简单的办法
    <img id="imgVerify" src="VerifyCode.aspx?" alt="看不清?点击更换" onclick="this.src=this.src+'?'" />

    一段js代码搞定,不知道其他人是不是还有什么高见?欢迎交流

    示例源码下载

    注:本文为博客园首发,其中源码或文章转载请注明来源(liudao.cnblogs.com或www.51aspx.com
  • 相关阅读:
    巧用border效果
    移动端页面无刷新跳转方法有三种
    word-break和word-wrap的使用和区别
    动态获取移动端视宽,从而结合rem达到适配
    一步一步学习IdentityServer4 (3)自定登录界面并实现业务登录操作
    一步一步学习IdentityServer3 (15) 授权模式那些事
    一步一步学习IdentityServer4 (2) 开始一个简单的事例
    一步一步学习IdentityServer4 (1) 概要配置说明
    Owin 自定义中间件(2)中间件进阶
    一步一步学习IdentityServer3 (14) 启用Https
  • 原文地址:https://www.cnblogs.com/Koy/p/732204.html
Copyright © 2011-2022 走看看