這個專題深入淺出地探討了各類驗證碼的生成和在Springboot3.x中的實踐，從基礎(chǔ)的滑動、點選、算術(shù)運算驗證碼到創(chuàng)新的藝術(shù)風(fēng)格、水印、二維碼驗證碼，適合所有Java開發(fā)者閱讀。在這個專題中，不僅可以學(xué)習(xí)到技術(shù)實踐，更能領(lǐng)略到驗證碼的美學(xué)魅力。讓我們一起探索驗證碼的無盡可能性。aWF28資訊網(wǎng)——每日最新資訊28at.com

什么是藝術(shù)風(fēng)格驗證碼

驗證碼，全名叫做 Completely Automated Public Turing Test to tell Computers and Humans Apart（全自動區(qū)分計算機(jī)和人類的圖靈測試）。其主要目標(biāo)是阻止機(jī)器自動進(jìn)行某些操作，例如注冊用戶、提交表單等。aWF28資訊網(wǎng)——每日最新資訊28at.com

而藝術(shù)風(fēng)格驗證碼，可以看作是驗證碼的一種創(chuàng)新形式，它將數(shù)字藝術(shù)融入到這項安全措施中。藝術(shù)風(fēng)格驗證碼的外觀吸引人，增強了用戶體驗，同時也提高了驗證碼的安全等級。因為這種驗證碼在視覺上的差異性和復(fù)雜性使得對驗證碼的自動識別變得更加困難，提高了安全性。aWF28資訊網(wǎng)——每日最新資訊28at.com

所謂藝術(shù)風(fēng)格，包括但不限于各種視覺藝術(shù)形式，例如流行藝術(shù)、抽象藝術(shù)、最小主義藝術(shù)等。驗證碼的顏色、形狀、過濾效果等都可以根據(jù)特定的藝術(shù)風(fēng)格來設(shè)計。例如，我們可能將驗證碼中的數(shù)字或字母渲染成流行藝術(shù)風(fēng)格，或者給驗證碼背景添加抽象藝術(shù)元素。aWF28資訊網(wǎng)——每日最新資訊28at.com

藝術(shù)風(fēng)格驗證碼的運行機(jī)制

藝術(shù)風(fēng)格驗證碼的運行機(jī)制同普通驗證碼非常相似，但是它引入了額外的步驟來添加藝術(shù)效果。以下是其一般的工作流程：aWF28資訊網(wǎng)——每日最新資訊28at.com

1. 生成一組隨機(jī)的字母或數(shù)字作為驗證碼的原始文本。
2. 為每個字符生成一個基本的圖形表示，通常是在圖片中為每個字符分配一個特定的位置并進(jìn)行繪制。
3. 對生成的圖片應(yīng)用一系列藝術(shù)效果。這些效果可以包含顏色變換、模糊處理、波紋效果、旋轉(zhuǎn)變形等。
4. 將完成藝術(shù)效果處理的驗證碼圖片展示給用戶，并存儲原始的驗證碼文本以供用戶提交后進(jìn)行比對驗證。

下面通過一個基本的例子演示在Java環(huán)境下如何通過代碼實現(xiàn)這個流程：aWF28資訊網(wǎng)——每日最新資訊28at.com

public void generateArtisticVerificationCode() {    String verificationCode = RandomStringUtils.randomAlphanumeric(5); // 生成原始驗證碼文本    BufferedImage image = new BufferedImage(100, 40, BufferedImage.TYPE_INT_ARGB); // 創(chuàng)建圖片對象    Graphics graphics = image.getGraphics(); // 獲取畫布    graphics.setFont(new Font("TimesRoman", Font.BOLD, 20)); // 設(shè)定字體    graphics.setColor(Color.BLACK); // 設(shè)定顏色    for (int i = 0; i < verificationCode.length(); i++) {        graphics.drawString(verificationCode.charAt(i) + "", 10 + i * 16, 28); // 在畫布上繪制每個字符    }    applyArtisticEffects(image); // 應(yīng)用藝術(shù)效果    // 將圖片展示給用戶，同時保留原始驗證碼文本以供后續(xù)驗證}// 示例藝術(shù)效果應(yīng)用函數(shù)public void applyArtisticEffects(BufferedImage image) {    // 這個函數(shù)會對圖片應(yīng)用各種藝術(shù)效果，包括但不限于顏色變換、模糊處理、波紋效果等    // 具體實現(xiàn)取決于你希望生成驗證碼的藝術(shù)風(fēng)格}

在生成藝術(shù)風(fēng)格驗證碼的過程中，我們首先生成了原始的驗證碼文本，并為每一個字符在圖片上繪制了基本的圖形表示。然后我們對圖片應(yīng)用了藝術(shù)效果處理。最后我們將處理過的驗證碼圖片展示給用戶，并保留原始的驗證碼文本，這樣用戶在提交時我們就可以對提交的驗證碼和原始的進(jìn)行比對。aWF28資訊網(wǎng)——每日最新資訊28at.com

技術(shù)實現(xiàn)：在Springboot3.x中如何生成藝術(shù)風(fēng)格驗證碼

在Springboot3.x中生成藝術(shù)風(fēng)格驗證碼，我們主要分為以下幾步：aWF28資訊網(wǎng)——每日最新資訊28at.com

1. 創(chuàng)建驗證碼Controller
2. 實現(xiàn)一個驗證碼服務(wù)
3. 實現(xiàn)一個藝術(shù)效果應(yīng)用服務(wù)

以下是詳細(xì)的實現(xiàn)步驟和示例代碼：aWF28資訊網(wǎng)——每日最新資訊28at.com

創(chuàng)建驗證碼Controller

首先，我們需要創(chuàng)建一個Controller用于處理驗證碼相關(guān)的請求。這個Controller將和我們的驗證碼服務(wù)進(jìn)行交互，接收用戶請求并返回生成的驗證碼。aWF28資訊網(wǎng)——每日最新資訊28at.com

@RestControllerpublic class VerificationCodeController {    @Autowired    private VerificationCodeService verificationCodeService;    @RequestMapping("/verificationCode")    public void getVerificationCode(HttpServletResponse response, HttpSession session) {        BufferedImage image = verificationCodeService.createVerificationImage();        session.setAttribute("VERIFICATION_CODE", verificationCodeService.getVerificationCode());        ImageIO.write(image, "jpeg", response.getOutputStream());    }}

在上述代碼中，我們創(chuàng)建了一個名為VerificationCodeController的Controller。我們注入了VerificationCodeService用于生成驗證碼。我們定義了一個路由/verificationCode，用于接收HTTP請求并返回生成的驗證碼圖片。aWF28資訊網(wǎng)——每日最新資訊28at.com

實現(xiàn)驗證碼服務(wù)

驗證碼服務(wù)的責(zé)任是生成原始的驗證碼文本和驗證碼圖片。aWF28資訊網(wǎng)——每日最新資訊28at.com

@Servicepublic class VerificationCodeService {    @Autowired    private ArtisticEffectService artisticEffectService;    private String verificationCode;    public BufferedImage createVerificationImage() {        verificationCode = RandomStringUtils.randomAlphanumeric(5);        BufferedImage image = new BufferedImage(100, 40, BufferedImage.TYPE_INT_ARGB);        Graphics graphics = image.getGraphics();        graphics.setFont(new Font("TimesRoman", Font.BOLD, 20));        graphics.setColor(Color.BLACK);        for (int i = 0; i < verificationCode.length(); i++) {            graphics.drawString(verificationCode.charAt(i) + "", 10 + i * 16, 28);        }        artisticEffectService.applyArtisticEffects(image);        return image;    }    public String getVerificationCode() {        return verificationCode;    }}

實現(xiàn)藝術(shù)效果應(yīng)用服務(wù)

藝術(shù)效果應(yīng)用服務(wù)用于對驗證碼圖片應(yīng)用藝術(shù)效果。aWF28資訊網(wǎng)——每日最新資訊28at.com

@Servicepublic class import java.awt.AlphaComposite;import java.awt.Color;import java.awt.GradientPaint;import java.awt.Graphics2D;import java.awt.image.BufferedImage;import java.awt.image.ConvolveOp;import java.awt.image.Kernel;import org.springframework.stereotype.Service;@Servicepublic class ArtisticEffectService {    public void applyArtisticEffects(BufferedImage image) {        Graphics2D graphics = (Graphics2D) image.getGraphics();        // 添加線性漸變效果        GradientPaint paint = new GradientPaint(0, 0, Color.BLUE, image.getWidth(), 0, Color.RED);        graphics.setPaint(paint);        graphics.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_ATOP, 0.5f));        graphics.fillRect(0, 0, image.getWidth(), image.getHeight());        // 添加模糊效果        float ninth = 1.0f/9.0f;        float[] blurKernel = {            ninth, ninth, ninth,            ninth, ninth, ninth,            ninth, ninth, ninth        };        ConvolveOp op = new ConvolveOp(new Kernel(3, 3, blurKernel));        BufferedImage blurredImage = op.filter(image, null);        graphics.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER));        graphics.drawImage(blurredImage, 0, 0, null);    }}

在上述代碼中，我們首先使用GradientPaint創(chuàng)建了一個從左邊的藍(lán)色向右邊的紅色逐漸變化的線性漸變效果，然后使用AlphaComposite將這個漸變效果和原來的圖像合成在一起。aWF28資訊網(wǎng)——每日最新資訊28at.com

接著，我們創(chuàng)建了一個模糊核(blur kernel)并使用ConvolveOp將模糊效果應(yīng)用到現(xiàn)有的圖像上。aWF28資訊網(wǎng)——每日最新資訊28at.com

實戰(zhàn)應(yīng)用：藝術(shù)風(fēng)格驗證碼的應(yīng)用示例

在接下來的示例中，我們將實現(xiàn)一個功能更為完善的Spring Boot應(yīng)用程序，該程序包含一個Web頁面，用戶可以從該頁面請求新的藝術(shù)風(fēng)格驗證碼，并提交輸入以進(jìn)行驗證。aWF28資訊網(wǎng)——每日最新資訊28at.com

以下是我們的應(yīng)用程序的主要組件：aWF28資訊網(wǎng)——每日最新資訊28at.com

1. 驗證碼生成服務(wù)
2. Web控制器
3. Vue.js前端應(yīng)用

驗證碼生成服務(wù)

我們先前已經(jīng)實現(xiàn)了一個驗證碼服務(wù)和藝術(shù)效果服務(wù)，現(xiàn)在我們可以將其集成到我們的Spring Boot應(yīng)用中。aWF28資訊網(wǎng)——每日最新資訊28at.com

@Servicepublic class VerificationCodeService {    private String verificationCode;    @Autowired    private ArtisticEffectService artisticEffectService;    public String createVerificationCode() {        verificationCode = RandomStringUtils.randomAlphanumeric(5);        return verificationCode;    }    public BufferedImage createVerificationImage() {        String code = createVerificationCode();        BufferedImage image = new BufferedImage(100, 40, BufferedImage.TYPE_INT_ARGB);        Graphics graphics = image.getGraphics();        graphics.setFont(new Font("Arial", Font.BOLD, 24));        graphics.setColor(Color.BLACK);        for (int i = 0; i < verificationCode.length(); i++) {            graphics.drawString(code.charAt(i) + "", 10 + i * 16, 32);        }        artisticEffectService.applyArtisticEffects(image);        return image;    }    public boolean verifyCode(String userInput) {        return userInput.equals(verificationCode);    }}

在這里，我們將為這個方法實現(xiàn)傾斜角度變化和圖片抖動這兩種常見的藝術(shù)樣式。aWF28資訊網(wǎng)——每日最新資訊28at.com

import java.awt.Color;import java.awt.Font;import java.awt.FontMetrics;import java.awt.Graphics2D;import java.awt.RenderingHints;import java.awt.image.BufferedImage;import java.util.Random;import org.springframework.stereotype.Service;@Servicepublic class ArtisticEffectService {    // 旋轉(zhuǎn)給定的圖像    public BufferedImage rotateImage(BufferedImage image) {        int width = image.getWidth();        int height = image.getHeight();        BufferedImage rotatedImage = new BufferedImage(width, height, image.getType());        Graphics2D graphics2D = rotatedImage.createGraphics();        double theta = Math.toRadians(new Random().nextInt(40) - 20);  // 在-20到20度之間隨機(jī)旋轉(zhuǎn)        graphics2D.rotate(theta, width / 2, height / 2);        graphics2D.drawImage(image, 0, 0, null);        graphics2D.dispose();        return rotatedImage;    }    // 對給定的字符串應(yīng)用底噪音和干擾線    public BufferedImage applyArtisticEffects(BufferedImage image) {        int width = image.getWidth();        int height = image.getHeight();        Random random = new Random();        // 底部噪聲        for (int i = 0; i < 30; i++) {            int x = random.nextInt(width);            int y = random.nextInt(height);            int rgb = getRandomRgb();            image.setRGB(x, y, rgb);        }        // 干擾線        Graphics2D graphics2D = image.createGraphics();        for (int i = 0; i < 5; i++) {            int x = random.nextInt(width);            int y = random.nextInt(height);            int xl = random.nextInt(width);            int yl = random.nextInt(height);            graphics2D.setColor(new Color(getRandomRgb()));            graphics2D.drawLine(x, y, x + xl, y + yl);        }        graphics2D.dispose();        return rotateImage(image);    }    // 生成隨機(jī)的RGB顏色    private int getRandomRgb() {        Random random = new Random();        int red = random.nextInt(256);        int green = random.nextInt(256);        int blue = random.nextInt(256);        return (red << 16) | (green << 8) | blue;    }}

在上述代碼中，我們首先為驗證碼圖片添加底部噪聲和干擾線，然后隨機(jī)地旋轉(zhuǎn)圖片角度。這將確保每一次生成的驗證碼圖片都是獨一無二的，并能有效地防止機(jī)器人自動識別。aWF28資訊網(wǎng)——每日最新資訊28at.com

Web控制器

接下來，我們需要創(chuàng)建一個Web控制器來處理用戶的HTTP請求。我們將創(chuàng)建兩個路由，一個用于生成和獲取驗證碼，另一個用于驗證用戶輸入的驗證碼。aWF28資訊網(wǎng)——每日最新資訊28at.com

@RestController@RequestMapping("/api")public class VerificationCodeController {    @Autowired    private VerificationCodeService verificationCodeService;    @GetMapping("/verificationCode")    public ResponseEntity<byte[]> getVerificationCode() throws IOException {        BufferedImage image = verificationCodeService.createVerificationImage();        ByteArrayOutputStream bos = new ByteArrayOutputStream();        ImageIO.write(image, "png", bos);        byte[] imageBytes = bos.toByteArray();        return ResponseEntity.ok().contentType(MediaType.IMAGE_PNG).body(imageBytes);    }    @PostMapping("/verify")    public ResponseEntity<Boolean> verifyCode(@RequestBody String userInput) {        boolean isCorrect = verificationCodeService.verifyCode(userInput);        return ResponseEntity.ok(isCorrect);    }}

在上述代碼中，getVerificationCode方法處理GET請求并返回新的驗證碼圖像。我們將返回的驗證碼圖像存儲為一個字節(jié)數(shù)組，以便將其作為HTTP響應(yīng)的一部分發(fā)送回客戶端。aWF28資訊網(wǎng)——每日最新資訊28at.com

verifyCode方法接收用戶的驗證碼輸入，并通過與存儲在服務(wù)端的驗證碼進(jìn)行比較來驗證輸入是否正確。aWF28資訊網(wǎng)——每日最新資訊28at.com

前端應(yīng)用

綜合以上所述，我們已經(jīng)成功地在后端實現(xiàn)驗證碼的生成和驗證。現(xiàn)在，我們需要一個前端用戶界面來顯示驗證碼，并提供一個輸入框讓用戶輸入驗證碼。aWF28資訊網(wǎng)——每日最新資訊28at.com

在這個例子中，我們將使用Vue.js來實現(xiàn)前端應(yīng)用。前端應(yīng)用將包含一個圖像組件用來顯示驗證碼，一個文本框用于用戶輸入，以及一個按鈕用于提交用戶輸入。aWF28資訊網(wǎng)——每日最新資訊28at.com

<template>  <div id="app">    <img :src="`data:image/png;base64,${captchaImage}`" @click="refreshCaptcha" />    <input v-model="userInput" type="text" placeholder="Enter the captcha" />    <button @click="verifyCaptcha">Submit</button>  </div></template><script>export default {  data() {    return {      captchaImage: '',      userInput: ''    }  },  methods: {    refreshCaptcha() {      axios.get('/api/verificationCode', { responseType: 'arraybuffer' })        .then(response => {          let base64 = btoa(new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), ''));          this.captchaImage = base64;        });    },    verifyCaptcha() {      axios.post('/api/verify', this.userInput)        .then(response => {          if (response.data) {            alert("The captcha is correct.");          } else {            alert("The captcha is incorrect.");            this.refreshCaptcha();          }        });    }  },  mounted() {    this.refreshCaptcha();  }}</script>

在上述代碼中，我們使用Vue.js提供的兩個生命周期鉤子：methods中的refreshCaptcha方法獲取新的驗證碼，mounted中的refreshCaptcha在頁面加載時調(diào)用。在驗證碼提交后，一個警告會告訴用戶提交的驗證碼是否正確。如果驗證碼不正確，將會刷新新的驗證碼。aWF28資訊網(wǎng)——每日最新資訊28at.com

通過這種方式，我們成功創(chuàng)建了一個藝術(shù)風(fēng)格驗證碼的完整應(yīng)用示例，包含后端的驗證碼生成、前端的驗證碼展示和用戶輸入驗證等完整流程。aWF28資訊網(wǎng)——每日最新資訊28at.com

本文主要介紹了如何實現(xiàn)一個藝術(shù)風(fēng)格的驗證碼系統(tǒng)，過程包含生成驗證碼、應(yīng)用藝術(shù)效果、及其在前后端的實現(xiàn)。驗證碼生成部分，通過Java的RandomStringUtils工具生成隨機(jī)字符串作為驗證碼。藝術(shù)效果應(yīng)用部分，實現(xiàn)了噪點擾動和模糊效果，來增強驗證碼的安全性同時賦予其獨特的藝術(shù)風(fēng)格。在后端，我們創(chuàng)建了一個Spring Boot應(yīng)用，實現(xiàn)了驗證碼的生成并返回給前端；在前端部分，我們使用Vue.js創(chuàng)建了一個用戶界面單元，用戶可以進(jìn)行驗證碼的獲取與輸入驗證。這樣的系統(tǒng)結(jié)構(gòu)使得驗證碼的生成及驗證過程更為靈活與高效。aWF28資訊網(wǎng)——每日最新資訊28at.com

aWF28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://www.www897cc.com/showinfo-26-88350-0.html使用Springboot3.x結(jié)合美學(xué)與功能的設(shè)計實現(xiàn)藝術(shù)風(fēng)格驗證碼

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： MQ消息積壓，把我整吐血了

下一篇： 程序員為什么一定要去造幾個輪子