一、原理

　　1.在webservice服务端，新建一个Bitmap对象，将验证码字符串、干扰线和干扰点绘制到此Bitmap上——>转换为字节数组——>Base64字符串

　　2.<img src="data:image/jpeg;base64,此处base64字符串"/>

二、生成验证码图片字节数据　　

  public byte[] CreateValidateGraphic(string validateCode)

        {

            var image = new Bitmap((int)Math.Ceiling(validateCode.Length * 12.0), );

            var g = Graphics.FromImage(image);

            try

            {

                //生成随机生成器

                var random = new Random();

                //清空图片背景色

                g.Clear(Color.White);

                //画图片的干扰线

                for (int i = ; i < ; i++)

                {

                    var x1 = random.Next(image.Width);

                    var x2 = random.Next(image.Width);

                    var y1 = random.Next(image.Height);

                    var y2 = random.Next(image.Height);

                    g.DrawLine(new Pen(Color.Silver), x1, y1, x2, y2);

                }

                //Font font = new Font("Arial", 12, (FontStyle.Bold | FontStyle.Italic));

                string[] fontName = { "华文新魏", "宋体", "圆体", "黑体", "隶书" };

                var font = new Font(fontName[new Random().Next(, validateCode.Length)], , (FontStyle.Bold | FontStyle.Italic));

                var brush = new LinearGradientBrush(new Rectangle(, , image.Width, image.Height),

                Color.Blue, Color.DarkRed, 1.2f, true);

                g.DrawString(validateCode, font, brush, , );

                //画图片的前景干扰点

                for (var i = ; i < ; i++)

                {

                    var x = random.Next(image.Width);

                    var y = random.Next(image.Height);

                    image.SetPixel(x, y, Color.FromArgb(random.Next()));

                }

                //画图片的边框线

                g.DrawRectangle(new Pen(Color.Silver), , , image.Width - , image.Height - );

                //保存图片数据

                var stream = new MemoryStream();

                image.Save(stream, ImageFormat.Jpeg);

                //输出图片流

                return stream.ToArray();

            }

            finally

            {

                g.Dispose();

                image.Dispose();

            }

        }

三、字节转base64

Convert.ToBase64String(CreateValidateGraphic("123T"));

四、在html标签<img/>中显示baser64字符串表示的图片

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="VerificationCodePage.aspx.cs" Inherits="VerificationCode.Pages.VerificationCodePage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

</head>

<body>

    <div>

     <img  id="verification" src="" style="width:200px;height:100px;" />

    </div>

    <script type="text/javascript">

        var CreatVerificationCode = function () {

            var number = Math.floor(Math.random() * 8999) + 1000;

            $.ajax({

                type: "post",

                url: "../WebService/VerificationCodeWebService.asmx/GetValidateCode",

                data: '{ number: ' + number + '}',

                dataType: "json",

                contentType: "application/json;charset=utf8",

                success: function (data) {

                    $("#verification").attr("src", "data:image/jpeg;base64," + data.d);

                },

                error: function (data) {

                    alert(data);

                }

            });

        }

        $("#verification").click(CreatVerificationCode);

        CreatVerificationCode();

    </script>

</body>

</html>

工程VerificationCode验证码.rar下载地址：链接: http://pan.baidu.com/s/1i5lmYGX 密码: unjr

html验证码的更多相关文章

  1. .net点选验证码实现思路分享

    哈哈好久没冒泡了,最进看见点选验证码有点意思,所以想自己写一个. 先上效果图 如果你被这个效果吸引了就请继续看下去. 贴代码前先说点思路: 1.要有一个汉字库,并按字形分类.(我在数据库里是安部首分类 ...

  2. 【探索】无形验证码 —— PoW 算力验证

    先来思考一个问题:如何写一个能消耗对方时间的程序? 消耗时间还不简单,休眠一下就可以了: Sleep(1000) 这确实消耗了时间,但并没有消耗 CPU.如果对方开了变速齿轮,这瞬间就能完成. 不过要 ...

  3. TODO：Laravel增加验证码

    TODO:Laravel增加验证码1. 先聊聊验证码是什么,有什么作用?验证码(CAPTCHA)是"Completely Automated Public Turing test to te ...

  4. PHP-解析验证码类--学习笔记

    1.开始 在 网上看到使用PHP写的ValidateCode生成验证码码类,感觉不错,特拿来分析学习一下. 2.类图 3.验证码类部分代码 3.1  定义变量 //随机因子 private $char ...

  5. 随手记_C#验证码

    前言 最近在网上偶然看见一个验证码,觉得很有意思,于是搜了下,是使用第三方实现的,先看效果: 总体来说效果还是可以的,官方提供的SDK也比较详细,可配置性很高.在这里在简单啰嗦几句使用方式: 使用步骤 ...

  6. WPF做12306验证码点击效果

    一.效果 和12306是一样的,运行一张图上点击多个位置,横线以上和左边框还有有边框位置不允许点击,点击按钮输出坐标集合,也就是12306登陆的时候,需要向后台传递的参数. 二.实现思路 1.获取验证 ...

  7. 零OCR基础6行代码实现C#验证码识别

    这两天因为工作需要,要到某个网站采集信息,一是要模拟登陆,二是要破解验证码,本想用第三方付费打码,但是想想网上免费的代码也挺多的,于是乎准备从网上撸点代码下来,谁知道,撸了好多个都不行,本人以前也没接 ...

  8. ASP.NET中画图形验证码

    context.Response.ContentType = "image/jpeg"; //生成随机的中文验证码 string yzm = "人口手大小多少上中下男女天 ...

  9. asp.net mvc 验证码

    效果图 验证码类 namespace QJW.VerifyCode { //用法: //public FileContentResult CreateValidate() //{ // Validat ...

  10. ecshop验证码

    <?php //仿制ecshop验证码(四位大写字母和数字.背景) //处理码值(四位大写字母和数字组成) //所有的可能的字符集合 $chars = 'ABCDEFGHIJKLMNOPQRST ...

随机推荐

  1. 翻译一篇SpiderMonkey GC的文章

    前言 这篇文章包含了对SpiderMonkey中Rooted<T>, Handle<T>的解释. 翻译自 https://developer.mozilla.org/en-US ...

  2. 对面向对象程序设计（OOP）的认识

    前言 本文主要介绍面向对象(OO)程序设计,以维基百科的解释: 面向对象程序设计(英语:Object-oriented programming,缩写:OOP),指一种程序设计范型,同时也是一种程序开发 ...

  3. Bootstrap定制(一)less入门及编译

    第一篇博,希望支持. 近期在开发一个项目,项目前端定位于bootstrap,遂花了少许时间研究了bootstrap,将其整理整理,与众人共享. bootstrap官方的定制,功能还算完善,但是基于we ...

  4. Kendo Web UI Grid数据绑定，删除，编辑，并把默认英文改成中文

    Kendo Web UI 是个不错的Jquery框.可惜老外写的,很多都是默认的英文,当然我们也可以设置成中文,接下来,我们就看看Grid是如何实现的数据绑定(Kendo Grid数据绑定实现有很多方 ...

  5. 简单说pyglet.event

    emitter,就是pyglet.event.EventDispatcher的子类, 负责发出事件的消息,并且规定了响应消息的函数名. class Consumer(pyglet.event.Even ...

  6. nyoj-366-D的小L(求全排列)

    D的小L 时间限制:4000 ms  |  内存限制:65535 KB 难度:2 描述       一天TC的匡匡找ACM的小L玩三国杀,但是这会小L忙着哩,不想和匡匡玩但又怕匡匡生气,这时小L给匡匡 ...

  7. 拼接xml时出现内存溢出解决办法

    /// designed by Alex /// 解决内存溢出问题,不可使用迭代器和foreach /// 循环遍历List, 别生成xml,一边释放 /// 反向遍历,相当于出栈,避免索引顺序乱的问 ...

  8. 【转】Android出现“Read-only file system”解决办法

    原文网址:http://www.111cn.net/sj/android/44496.htm 下面介绍一篇Android出现“Read-only file system”解决办法 有碰到这类问题的朋友 ...

  9. bzoj1620 [Usaco2008 Nov]Time Management 时间管理

    Description Ever the maturing businessman, Farmer John realizes that he must manage his time effecti ...

  10. iOS opencv

    1.在iPhone上使用 OpenCV http://blog.csdn.net/kmyhy/article/details/7560472 2. OpenCV iOS Hello¶ http://d ...