一、原理

　　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. show_space/get_alert_log/get_trace_file

    1.get_alert_log 获取alert文件的路径和名称 set serveroutput on        --设置输出,让sqlplus在屏幕上可以输出.(要加入到login.sql中!) ...

  2. CC3的多列属性Multi-column

    CC3的多列属性Multi-column 一直都很想了解这个属性,总是忘了.今天可以研究一下,回想起想了解它的原因,大概是觉得它很容易分开几列.可能会有很多好处和方便. 0 16-09-17 1 16 ...

  3. 基于cygwin构建u-boot（三）make错误忽视

    接上文,修改gcc 的-std标准后,.depend文件处理仍然出现了错误: 五.错误:make中命令报错(sed找不到需要的文件) 错误告警如下: make -C examples/api all ...

  4. 使用pip install 或者easy_install安装Python的各种包出现cc failed with exit status 1

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  5. [CSAPP]并发与并行

    学了这么久的计算机,并发与并行的概念理解的一直不够透彻.考研复习那会儿,以为自己懂了,然而直到看了CSAPP才算是真正明白了这俩个概念. 并发(concurrency) 流X和流Y并发运行是指,流X在 ...

  6. 如何用googletest写单元测试

    http://www.uml.org.cn/c++/201203293.asp googletest是一个用来写C++单元测试的框架,它是跨平台的,可应用在windows.linux.Mac等OS平台 ...

  7. openFileDialog与saveFileDialog的使用

    private void btnOpen_Click(object sender, EventArgs e) { if (openFileDialog1.ShowDialog() == DialogR ...

  8. layout_weight

    最近写Demo,突然发现了Layout_weight这个属性,发现网上有很多关于这个属性的有意思的讨论,可是找了好多资料都没有找到一个能够说的清楚的,于是自己结合网上资料研究了一下,终于迎刃而解,写出 ...

  9. Android高德地图自定义Markers的例子

    下文为各位重点介绍关于Android高德地图自定义Markers的例子,希望这篇文章能够让各位理解到Android高德地图自定义Markers的方法. 之前的博客里说了地图的嵌入和定位,今天就说说在地 ...

  10. Dungeon Game 解答

    Question The demons had captured the princess (P) and imprisoned her in the bottom-right corner of a ...