JSP随机验证图片如何制作

小编整理了一篇关于模仿腾讯随机验证图片的文章。下面直接上代码吧!一个Java 类和一个JSP 页面。

Java类代码:

以下是JSP模仿腾讯随机验证图片引用片段:

package icewee.image;

import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.awt.geom.Line2D;
import java.awt.image.BufferedImage;
import java.util.Random;

public class TokenUtil {
  private static final String base = "23456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefhijklmnpqrstuvwxyz";
  private static final int length = base.length();

  public static BufferedImage createTokenImage(int width, int height,
      String randomCode) {
    BufferedImage image = new BufferedImage(width, height,
        BufferedImage.TYPE_INT_RGB);
    Graphics2D g = image.createGraphics();
    Random random = new Random();
    g.setColor(new Color(230, 230, 250)); // 设置背景色
    g.fillRect(0, 0, width, height); // 填充背景
    g.setColor(Color.BLACK);
    // 绘制边缘
    g.drawRect(-1, -1, width + 1, height + 1);
    g.setColor(Color.GRAY);
    // 设置字体,随机选择字体,暂设置8种字体
    Font font = new Font((new String[] { "Arial", "Arial Black",
        "Arial Italic", "Courier New", "Courier New Bold Italic",
        "Courier New Italic", "Franklin Gothic Medium",
        "Franklin Gothic Medium Italic" })[random.nextInt(8)],
        Font.PLAIN, 30);
    // g.setStroke(new BasicStroke((float)(Math.random()),
    // BasicStroke.CAP_BUTT, BasicStroke.JOIN_BEVEL));
    g.setFont(font);
    // 定义字体颜色范围
    int red = random.nextInt(160), green = random.nextInt(50), blue = random
        .nextInt(50);
    // 定义一个无干扰线区间和一个起始位置
    int nor = random.nextInt(50), rsta = random.nextInt(131);
    // 绘制干扰正弦曲线 M:曲线平折度, D:Y轴常量 V:X轴焦距
    int M = random.nextInt(15) + 5, D = random.nextInt(23) + 15, V = random
        .nextInt(5) + 1;
    double x = 0.0;
    double y = M * Math.sin(Math.toRadians(V * x)) + D;
    double px, py;
    for (int i = 0; i < 131; i++) {
      px = x + 1;
      py = M * Math.sin(Math.toRadians(V * px)) + D;
      if (rsta < i && i < (rsta + nor))
        g.setColor(new Color(230, 230, 250));
      else
        g.setColor(new Color(red, green, blue));
      // 随机设置像素点宽带(线宽)
      g.setStroke(new BasicStroke((float) (Math.random() + 1.5f)));
      g.draw(new Line2D.Double(x, y, px, py));
      x = px;
      y = py;
    }
    char[] codes = randomCode.toCharArray();
    for (int i = 0; i < codes.length; i++) {
      // 旋转图形
      int degree = (random.nextInt(20) - 10) % 360;
      double ang = degree * 0.0174532925; // 将角度转为弧度
      g.rotate(ang, width / 2, height / 2);
      g.setColor(new Color(red, green, blue));
      g.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
          RenderingHints.VALUE_ANTIALIAS_ON);
      int gr = random.nextInt(8);
      g.drawString(String.valueOf(codes[i]), 24 * i + 10 + gr, 38);
    }
    g.dispose();
    return image;
  }

  public static String createRandomCode(int size, int width, int height) {
    StringBuffer randomCode = new StringBuffer();
    for (int i = 0; i < size; i++) {
      Random random = new Random();
      int start = random.nextInt(length);
      String strRand = base.substring(start, start + 1);
      randomCode.append(strRand);
    }
    return randomCode.toString();
  }
}

JSP页面:

以下是JSP模仿腾讯随机验证图片代码引用片段:

<%@ page contentType="image/jpeg" pageEncoding="GBK"%>
<%@ page import="java.awt.image.BufferedImage" %>
<%@page import="javax.imageio.ImageIO" %>
<%@ page import="com.icesoft.image.TokenUtil" %>

<%
  //设置页面不缓存
  response.setHeader("Pragma", "No-cache");
  response.setHeader("Cache-Control", "no-cache");
  response.setDateHeader("Expires", 0);
  int width = 120, height = 50;
  String randomCode = TokenUtil.createRandomCode(4, width, height);
  System.out.println("生成的随机码:" + randomCode);
  BufferedImage image = TokenUtil.createTokenImage(width, height, randomCode);
  ImageIO.write(image, "JPEG", response.getOutputStream());
  response.flushBuffer();
  out.clear();
  out = pageContext.pushBody();
%>

以上就是JSP 模仿腾讯随机验证图片全部代码,希望对大家的学习有所帮助。

时间: 2015-10-01

JavaScript实现随机替换图片的方法

本文实例讲述了JavaScript实现随机替换图片的方法.分享给大家供大家参考.具体如下: 下面代码可实现将页面上的图片随机替换成别的图片,或者随机显示一个图片 <script> document.write(<img src="img/+parseInt(Math.random()*(5)) +.gif"height="40" width="50"> </script> 其中的图片文件名为: 0.gif 1.

javascript 随机广告代码(图片广告)

'); document.writeln(''); document.writeln(''); //DEL 20090522 document.write(''); //****************************************************/ //rnd() //****************************************************/ function rnd() { var ia=9301; var ic=49297; var

基于JavaScript代码实现随机漂浮图片广告

在网上有很多这样的代码,不过未必符合W3C标准,因为在头部加上<!DOCTYPE html>类似标签之后,漂浮效果就会失效,下面分享一个符合标准的漂浮代码,使需要的朋友免去大量改造代码的繁琐. 代码一: 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http:/

javascript随机将第一个dom中的图片添加到第二个div中示例

javascript随机将第一个dom中的图片添加到第二个div中去,此代码的是一个简单的例子,将第一个div中的五张图片中,提取随机两张显示到第二个div中. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=

javascript随机显示背景图片的方法

本文实例讲述了javascript随机显示背景图片的方法.分享给大家供大家参考.具体如下: 将以下代码加入HTML的<head></head>之间: <script LANGUAGE="JavaScript"> bg = new Array(2); //设定图片数量,如果图片数为3,这个参数就设为2,依次类推 bg[0] = 'bg1.gif' //显示的图片路径,可用http:// bg[1] = 'bg2.gif' bg[2] = 'bg3.gi

JS实现鼠标移动到缩略图显示大图的图片放大效果

一个网页上用的图片提示效果,当把鼠标移动到图片缩略图的时候,会显示图片大图,似乎在网上这是个很常见的效果,实现方法也比较多,有人用CSS,有人用JavaScript,有人用jQuery,总之,选择自己习惯的方式去实现,就是最棒的. 图片提示效果 body{margin:0 ;padding:40px;line-height:180%;} img{border:none;} ul,li{margin:0 ;padding:0;} li{list-style:none;display:inline;

js 图片随机不定向浮动的实现代码

复制代码 代码如下: //很有趣的浮动哦,不用太多代码,和大家分享下<html><head>随机浮动<style type="text/css">#divimg{/*对图片进行绝对定位*/position:absolute;}</style></head><body><div id="divimg"><img src="../../resource/images/fl

js鼠标点击图片实现随机变换图片的方法

本文实例讲述了js鼠标点击图片实现随机变换图片的方法.分享给大家供大家参考.具体实现方法如下: <html> <title>鼠标点击图片即可随机变换图片</title> <body bgcolor="#fef4d9" OnLoad="swapPic()"> <center> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin var ra

JS实现页面载入时随机显示图片效果

本文实例讲述了JS实现页面载入时随机显示图片效果.分享给大家供大家参考,具体如下: <html> <head> <title>JS 随机图片效果</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css"> <!-- img { b

JavaScript 创建随机数和随机图片

创建随机数 ①自JavaScript产生后,好多浏览器中都有内置的随机数发生方法.例如: var number = Math.random(); 该方法产生一个0到1之间的浮点数. ②基于时间,亦可以产生随机数.例如: var now=new Date(); var number = now.getSeconds(); 这将产生一个基于目前时间的0到59的整数. var now=new Date(); var number = now.getSeconds()%43; 这将产生一个基于目前时间的

图片上传即时显示缩略图的js代码

<script language="javascript" type="text/javascript"> var allowExt = ['jpg', 'gif', 'bmp', 'png', 'jpeg']; var preivew = function(file, container){ try{ var pic = new Picture(file, container); }catch(e){ alert(e); } } //缩略图类定义 va

js实现网页随机切换背景图片的方法

本文实例讲述了js实现网页随机切换背景图片的方法.分享给大家供大家参考.具体实现方法如下: 首先要准备一些图像,图像的大小(无论是尺寸大小还是数据大小)要控制好,如果太大,会使用户等不及查看全图就跳出了,如果太小,又会影响页面质量 在script中将这些图像编为一个数组,便于调用.数组的长度当然就是图像的数量. 复制代码 代码如下: var bodyBgs = [];    //创建一个数组变量来存储背景图片的路径 bodyBgs[0] = "images/01.jpg"; bodyB

js设置随机切换背景图片的简单实例

实例如下: <script> var imgs =["http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_2.jpg", "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_default.png", "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/

jquery动态切换背景图片的简单实现方法

本文实例讲述了jquery动态切换背景图片的简单实现方法.分享给大家供大家参考,具体如下: (function() { var bgCounter = 0, backgrounds = [ "Images/BACKGROUND_1_TEST.png", "Images/BACKGROUND_2_TEST.png", "Images/BACKGROUND_3_TEST.png" ]; function changeBackground() { bg

jQuery动态移除和添加背景图片的方法详解

本文实例讲述了jQuery动态移除和添加背景图片的方法.分享给大家供大家参考,具体如下: 利用jQuery移除和添加图片 1.样式 <style type="text/css"> .changeImage{ background:url(images/right.png) no-repeat center; } </style> 2.JS (1)在改变标签的样式,需要移除之前添加的样式 $("#tab tr").find("td&q

JS防止网页被嵌入iframe框架的方法分析

本文实例讲述了JS防止网页被嵌入iframe框架的方法.分享给大家供大家参考,具体如下: 例如: <script type="text/javascript"> if (window!=top) // 判断当前的window对象是否是top对象 top.location.href = window.location.href; // 如果不是,将top对象的网址自动导向被嵌入网页的网址 </script> 这段代码是有效的.但是,有一个问题:使用后,任何人都无法

js控制网页背景音乐播放与停止的方法

本文实例讲述了js控制网页背景音乐播放与停止的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

JS实现跟随鼠标立体翻转图片的方法

本文实例讲述了JS实现跟随鼠标立体翻转图片的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Wanna tell her - interactive DHTML</title> <

js实现多选项切换导航菜单的方法

本文实例讲述了js实现多选项切换导航菜单的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>多选项切换导航菜单</title> </head> <style type="text/c

javascript设置页面背景色及背景图片的方法

本文实例讲述了javascript设置页面背景色及背景图片的方法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus