首先,我们先来看本地如何生成图片验证码的,再来写输出到网页的验证码如何实现。

先来看最简单的—实现的功能是,将一个字符串变成图片写入到文件中

实现代码:

package cn.hncu.img;

import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException; import javax.imageio.ImageIO;
//该类包含一些用来查找 ImageReader 和 ImageWriter 以及执行简单编码和解码的静态便捷方法。 import org.junit.Test; public class ImgDemo { //学习如何把一个字符串变成图片写到一个文件
@Test
public void ImgDemo1() throws FileNotFoundException, IOException{
BufferedImage img = new BufferedImage(60, 30, BufferedImage.TYPE_INT_RGB);
// 表示一个图像,它具有合成整数像素的 8 位 RGB 颜色分量。
Graphics g = img.getGraphics();
g.drawString("Hello",10,20);
//使用此图形上下文的当前字体和颜色绘制由指定 string 给定的文本。最左侧字符的基线位于此图形上下文坐标系的 (x, y) 位置处。
g.dispose();////类似于流中的close()带动flush()---把数据刷到img对象当中
//释放此图形的上下文以及它使用的所有系统资源。调用 dispose 之后,就不能再使用 Graphics 对象。
ImageIO.write(img, "JPG", new FileOutputStream("img/a.jpg"));
//使用支持给定格式的任意 ImageWriter 将一个图像写入 File。
} }

结果:

上面那个很简单,对不对,我们看到的验证码都不是这样的,那好,我们给它加点干扰线,背景色,字符和y坐标随机生成。

有干扰线、背景色的验证码-写入文件

演示代码:

package cn.hncu.img;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.Date;
import java.util.Random; import javax.imageio.ImageIO;
//该类包含一些用来查找 ImageReader 和 ImageWriter 以及执行简单编码和解码的静态便捷方法。 import org.junit.Test; public class ImgDemo {
//把上面的字符串改成我们平时用的验证码---生成几个随机数字,有背景色和干扰线
@Test
public void ImgDemo2() throws FileNotFoundException, IOException{
int width = 80;
int height= 40;
int lines = 10;
BufferedImage img = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); Graphics g = img.getGraphics(); //设置背景色
g.setColor(Color.white);
g.fillRect(0, 0, width, height);//画背景
//填充指定的矩形。使用图形上下文的当前颜色填充该矩形 //设置字体
g.setFont(new Font("宋体", Font.BOLD, 18)); //随机数字
Date d = new Date();
//System.out.println(d.getTime());
Random r = new Random(d.getTime());
for(int i=0;i<4;i++){
int a = r.nextInt(10);//取10以内的整数[0,9]
int y = 10+r.nextInt(20); //10~30范围内的一个整数,作为y坐标
Color c = new Color(r.nextInt(255), r.nextInt(255), r.nextInt(255));
g.setColor(c);
g.drawString(""+a, 5+i*width/4, y);
}
//干扰线
for(int i=0;i<lines;i++){
Color c = new Color(r.nextInt(255), r.nextInt(255), r.nextInt(255));
g.setColor(c);
g.drawLine(r.nextInt(width), r.nextInt(height), r.nextInt(width), r.nextInt(height));
} g.dispose();//类似于流中的close()带动flush()---把数据刷到img对象当中
ImageIO.write(img, "JPG", new FileOutputStream("img/b.jpg")); } }

演示结果:

最后来看一个可以旋转和放缩的验证码-写到图片本地文件中

演示代码:

package cn.hncu.img;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.geom.AffineTransform;
import java.awt.image.BufferedImage;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.Date;
import java.util.Random; import javax.imageio.ImageIO;
//该类包含一些用来查找 ImageReader 和 ImageWriter 以及执行简单编码和解码的静态便捷方法。 import org.junit.Test; public class ImgDemo {
@Test//可以旋转和放缩的验证码
public void ImgDemo3() throws FileNotFoundException, IOException{
int width = 80;
int height = 40;
int lines = 10;
BufferedImage img = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics2D g2d = (Graphics2D)img.getGraphics(); g2d.setFont(new Font("宋体", Font.BOLD, 20)); Random r = new Random(new Date().getTime()); //设置背景色
g2d.setColor(new Color(r.nextInt(255), r.nextInt(255), r.nextInt(255)));
g2d.drawRect(0, 0, width, height);//绘制指定矩形的边框。
g2d.setColor(new Color(r.nextInt(255), r.nextInt(255), r.nextInt(255)));
g2d.fillRect(0, 0, width, height);//填充指定的矩形。 for(int i=0;i<4;i++){
String str = ""+r.nextInt(10); //处理旋转
AffineTransform Tx = new AffineTransform();
Tx.rotate(Math.random(), 5+i*15, height-5);
//用弧度测量的旋转角度,旋转锚点的 X 坐标,旋转锚点的 Y 坐标
//Tx.scale(0.7+Math.random(), 0.7+Math.random());
//x坐标方向的缩放倍数,y坐标方向的缩放倍数
g2d.setTransform(Tx);
Color c = new Color(r.nextInt(255), r.nextInt(255), r.nextInt(255));
g2d.setColor(c);
g2d.drawString(str, 2+i*width/4, height-13);
} //干扰线
for(int i=0;i<lines;i++){
Color c = new Color(r.nextInt(255), r.nextInt(255), r.nextInt(255));
g2d.setColor(c);
g2d.drawLine(r.nextInt(width), r.nextInt(height), r.nextInt(width), r.nextInt(height));
} g2d.dispose(); ImageIO.write(img, "JPG", new FileOutputStream("img/c.jpg"));
}
}

演示结果:

下面就要开始演示前台的图片验证技术了。

前台的图片验证技术

这个项目的结构图:

index.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function changImg(){
var img = document.getElementById("servletImg");
var d = new Date();
var time = d.getTime();//如果没有这个
//下面这一句不会起作用,因为浏览器的缓存技术,图片并不会刷新
//img.src="/myHelloWeb/servlet/ImageServlet";
img.src="/myHelloWeb/servlet/ImageServlet?"+time;
//?号后面的东西是通过get方式传递的
} </script>
</head> <body>
这是我的手动主页!
<br/>
<img id="servletImg" src="/myHelloWeb/servlet/ImageServlet" /><a href="javascript:changImg()">看不清</a>
</body>
</html>

web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
<display-name></display-name>
<servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>ImageServlet</servlet-name>
<servlet-class>cn.hncu.img.ImageServlet</servlet-class>
</servlet> <servlet-mapping>
<servlet-name>ImageServlet</servlet-name>
<url-pattern>/servlet/ImageServlet</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>

ImageServlet.java

package cn.hncu.img;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;
import java.util.Random; import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; public class ImageServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
} public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//告诉客户端,输出的格式
response.setContentType("image/jpeg"); int width = 80;
int height = 40;
int lines = 10;
BufferedImage img = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); Graphics g = img.getGraphics(); //设置背景色
g.setColor(Color.WHITE);
g.fillRect(0, 0, width, height); //设置字体
g.setFont(new Font("宋体", Font.BOLD, 20)); //随机数字
Random r = new Random(new Date().getTime());
for(int i=0;i<4;i++){
int a = r.nextInt(10);
int y = 10+r.nextInt(20);//10~30范围内的一个整数,作为y坐标 Color c = new Color(r.nextInt(255),r.nextInt(255),r.nextInt(255));
g.setColor(c); g.drawString(""+a, 5+i*width/4, y);
} //干扰线
for(int i=0;i<lines;i++){
Color c = new Color(r.nextInt(255),r.nextInt(255),r.nextInt(255));
g.setColor(c);
g.drawLine(r.nextInt(width), r.nextInt(height), r.nextInt(width), r.nextInt(height));
} g.dispose();//类似于流中的close()带动flush()---把数据刷到img对象当中 ImageIO.write(img, "JPG", response.getOutputStream());
} }

演示结果:

下面这个是在index.jsp中:

如果是用这句:

img.src=”/myHelloWeb/servlet/ImageServlet”;

大家可以看看响应头:



再看看用这句的响应头:

img.src=”/myHelloWeb/servlet/ImageServlet?”+time;

多了个Date响应!

因为时间一直在变,所以每次点看不清,都会再向服务器请求一次,而不会因为浏览器的缓存,而不去请求了。

验证码就先到这里结束啦。

Web---图片验证码生成教程详解-从简单到复杂-从本地到前后台的更多相关文章

  1. SAE上传web应用(包括使用数据库)教程详解及问题解惑

    转自:http://blog.csdn.net/baiyuliang2013/article/details/24725995 SAE上传web应用(包括使用数据库)教程详解及问题解惑: 最近由于工作 ...

  2. webpack安装配置使用教程详解

    webpack安装配置使用教程详解 www.111cn.net 更新:2015-09-01 编辑:swteen 来源:转载 本文章来为各位详细的介绍一下关于webpack安装配置使用教程吧,这篇文章对 ...

  3. 史上最全的maven pom.xml文件教程详解

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  4. Android图片缓存之Bitmap详解

    前言: 最近准备研究一下图片缓存框架,基于这个想法觉得还是先了解有关图片缓存的基础知识,今天重点学习一下Bitmap.BitmapFactory这两个类. 图片缓存相关博客地址: Android图片缓 ...

  5. 开发工具类API调用的代码示例合集:六位图片验证码生成、四位图片验证码生成、简单验证码识别等

    以下示例代码适用于 www.apishop.net 网站下的API,使用本文提及的接口调用代码示例前,您需要先申请相应的API服务. 六位图片验证码生成:包括纯数字.小写字母.大写字母.大小写混合.数 ...

  6. Webstorm使用教程详解

    Webstorm使用教程详解 Webstorm垂直分栏.左右分栏 Webstorm 主题.背景.颜色等设置的导入导出   使用WebStorm开发web前端 网页中文乱码问题的解决方案 Webstor ...

  7. web页面 验证码 生成

    web页面 验证码 生成 kaptcha 是一个非常实用的验证码生成工具.有了它,你可以生成各种样式的验证码,因为它是可配置的.kaptcha工作的原理是调用 com.google.code.kapt ...

  8. Pycharm新手使用教程(详解)

    Pycharm新手使用教程(详解) [注]: 如果想要下载Pycharm工具,直接去<开发工具>中进行下载. 简介 Jetbrains家族和Pycharm版本划分: pycharm是Jet ...

  9. windows上安装Anaconda和python的教程详解

    一提到数字图像处理编程,可能大多数人就会想到matlab,但matlab也有自身的缺点: 1.不开源,价格贵 2.软件容量大.一般3G以上,高版本甚至达5G以上. 3.只能做研究,不易转化成软件. 因 ...

随机推荐

  1. maven使用之烦人的.lastUpdated文件

    项目使用maven管理jar包,很容易因为各种原因(网速慢.断网)导致jar包下载不下来,出现很多.lastUpdated文件.这些文件一个一个删除太麻烦.下面是全部删除的方法 windows系统 c ...

  2. 怎样用AIDL Service 传递复杂数据

    大家都知道在Android中通过AIDL可以跨进程调用Service中的数据,网上也有很多实例,但是大部分实例都是关于基本数据类型的远程调用,很少讲到复杂数据的调用,今天我用一个例子来演示一下怎样用A ...

  3. 九度OJ 1205 N阶楼梯上楼问题 -- 动态规划(递推求解)

    题目地址:http://ac.jobdu.com/problem.php?pid=1205 题目描述: N阶楼梯上楼问题:一次可以走两阶或一阶,问有多少种上楼方式.(要求采用非递归) 输入: 输入包括 ...

  4. (转)UIColor 的使用

    os开发-UIColor的使用. 在ios开发中,经常遇到对UIColor的相关操作. 比如这样 self.backgroundColor = [UIColorredColor]; 这里的redCol ...

  5. C++实现一个多线程同步方式的协同工作程序示例

    多线程并发程序与协同程序其实是不同的概念.多线程并发是多个执行序同时运行,而协同程序是多个执行序列相互协作,同一时刻只有一个执行序列.今天想到的是将两者结合起来,拿现实生活中的例子来说,假设一个班级有 ...

  6. XSS漏洞(跨站脚本)

    不要轻信用户提交上来的数据alert消息太难看,因此开发一个aspx页面用来统一展示消息ShowMessage.ashx //主页将判断重定向到另一个页面 if (TextBox1.Text != & ...

  7. 如何在WCF中集成unity

    第一种是代码方式: 点击打开链接http://blogs.microsoft.co.il/gadib/2010/11/30/wcf-and-unity-20/ 还有一种方式可以扩展成配置文件,有时间再 ...

  8. linux下多线程踩过的坑(不定更新)

    1,多线程下整个进程的退出 <<APUE>>关于进程环境一章中指出了进程退出的8个条件: ... (4)最后一个线程从启动例程中返回 (5)最后一个线程调用pthread_ex ...

  9. Linux 进程编程

    Linux通过维护者五个状态来调度进程的运行.这五个状态分别为:运行.可中断.不可中断.僵死.停止 . PID来标识不同的进程的,Linux中每一个进程都有一个唯一的进程号 . PCB块就是一个进程资 ...

  10. ng表单验证,提交以后才显示错误

    只在提交表单后显示错误信息 有时候不想在用户正在输入的时候显示错误信息. 当前错误信息会在用户输入表单时立即显示. 由于Angular很棒的数据绑定特性,这是可以发生的. 因为所有的事务都可以在一瞬间 ...