Web---圖片驗證碼生成教程詳解-從簡單到複雜-從本地到前後臺

阿新 • • 發佈：2019-01-08

首先，我們先來看本地如何生成圖片驗證碼的，再來寫輸出到網頁的驗證碼如何實現。

先來看最簡單的—實現的功能是，將一個字串變成圖片寫入到檔案中

實現程式碼：

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---圖片驗證碼生成教程詳解-從簡單到複雜-從本地到前後臺

首先，我們先來看本地如何生成圖片驗證碼的，再來寫輸出到網頁的驗證碼如何實現。先來看最簡單的—實現的功能是，將一個字串變成圖片寫入到檔案中實現程式碼： package cn.hncu.img; import java.awt.Graphics;

Flask實戰第40天：圖片驗證碼生成技術

all see pillow 字體大小 src print new line 訪問安裝pillow pip install pillow 在utils下新建python package命名為captcha 把需要需要用到的字體放在captcha下編輯

Node.js圖片驗證碼生成svg-captcha

var option = { size: 6, // 驗證碼長度 ignoreChars: '0o1ilI', // 驗證碼字元中排除 0o1i noise: 2, // 干擾線條的數量 color: true, // 驗證碼的字元是否有顏色，預設沒有，如果設

[轉]php 圖片驗證碼生成前後臺驗證

本文轉自：https://www.cnblogs.com/xiaoyezi/p/3541195.html 自己從前一段時間做了個php小專案，關於生成圖片驗證碼生成和後臺的驗證，把自己用到的東西總結一下，希望大家在用到相關問題的時候可以有一定的參考性。首先，php驗證碼生成。程式碼如下： 1.生成

圖片驗證碼識別教程技術原理分析

面對技術這片大海，我們都是一個漁民，三天打魚，兩天結網。我是把過去自己所掌握的所有技術總結成一張網，若一個技術乾貨分享的東西離我的網還太遠，我就會放棄去了解。因為如果不能連結到這張網中，

學習筆記-圖片驗證碼生成

/** * 圖片驗證碼 * @param request * @param response */ @RequestMapping("/verifyImage") public void verifyImage(HttpServletRequest re

圖片驗證碼生成以及前端驗證

第一種是session 驗證方式 <?php session_start(); //開啟session記錄驗證碼資料 vCode(4, 15);//設定驗證碼的字元個數和圖片基礎寬度 //vCode 字元數目，字型大小，圖片寬度、高度 functio

PHP GD 生成圖片驗證碼+session獲取儲存驗證碼

mark ast rac alloc orm ext random col nbsp 以下分享一個PHP制作的圖片驗證碼案例：案比例如以下圖：運用PHP GD具體請看：http://www.php.net/manual/zh/book.im

java生成圖片驗證碼實現

isp tex version edi ade 頁面類型 logs exp 兩種圖片樣式分別是用Graphics類和Graphics2D 類實現(Graphics2D擴展了Graphics類)，可以參考資料，畫出自己想要的圖片 Graphics2D 參考api地址：ht

jquery如何生成圖片驗證碼

sla style ctx ott etc func max ++ 導致 jQuery(function($){ /**生成一個隨機數**/ function randomNum(min, max) { return Math.f

PHP生成圖片驗證碼、點擊切換實例

調用 ret image etc 格式點擊切換 article png get http://www.jb51.net/article/51506.htm 現在讓我們來看下 PHP 代碼復制代碼代碼如下: <?php session_start();functi

java圖形驗證碼生成工具類及web頁面校驗驗證碼

組合 line des resp word buffere 需要 case ali 最近做驗證碼，參考網上案例，發現有不少問題，特意進行了修改和完善。驗證碼生成器：[ht

python生成圖片驗證碼

per ont 字符 ESS ext ttf 隨機 dom ice import PIL from PIL import Image from PIL import ImageDraw,ImageFont import random def get_r

Java使用imageio、awt生成圖片驗證碼

static rem auto put 驗證碼 encode width nal cond 1、生成驗證碼工具類 public class CheckCodeTool { private Integer width = 80; private Intege

SimpleCaptcha生成圖片驗證碼內容為亂碼

編輯器 cap sharp true 驗證 eboot 還需 light 報表轉自：https://blog.csdn.net/wlwlwlwl015/article/details/51482065 前言報表中發現有中文亂碼和中文字體不整齊（重疊）的情況，首先考慮

生成圖片驗證碼

dom 測試 clas void exceptio ide 隨機 file buffere 1 package util; 2 3 import javax.imageio.ImageIO; 4 import java.awt.*; 5 import ja

python生成圖片驗證碼程式碼

from PIL import Image, ImageDraw, ImageFont import random import string #所有可能的字元，主要是英文字母和數字 characters = string.ascii_letters+string.digits #

WEB——驗證碼生成、IO儲存、二進位制傳輸

執行下段程式，瀏覽器訪問127.0.0.1:8000 即可在頁面展現驗證碼程式碼包含了驗證碼的生成　io儲存　二進位制資料傳輸等知識點 # coding=utf-8 # wsgi_server.py import random import string import base64

vue中 identify(生成圖片驗證碼)外掛

效果圖如下：實現過程： 1.寫一個名為identify.vue的子元件 2.子元件的註冊和引用 3.主頁面中使用子元件 step1:identify.vue的子元件,程式碼如下： <template> <div

生成登入時的圖片驗證碼

環境：springboot專案思路：從後臺生成圖片，然後傳輸到前臺顯示，每次生成的驗證碼儲存在session裡借鑑了別人用java生成圖片的方法直接上程式碼前端剛載入登入頁面時和每次點選圖片獲取驗證碼的url介面 /**生成圖片驗證碼*/ @R

Web---圖片驗證碼生成教程詳解-從簡單到複雜-從本地到前後臺

先來看最簡單的—實現的功能是，將一個字串變成圖片寫入到檔案中

實現程式碼：

結果：

有干擾線、背景色的驗證碼-寫入檔案

演示程式碼：

演示結果：

最後來看一個可以旋轉和放縮的驗證碼-寫到圖片本地檔案中

演示程式碼：

演示結果：

前臺的圖片驗證技術

index.jsp:

web.xml:

ImageServlet.java

相關推薦