首先img的src可以使用遠(yuǎn)程圖片，也就是說他同樣是可以請求后端的，這也就是實現(xiàn)圖形驗證碼隨機(jī)顯示的原理似扔。
配置html頁面
- 使用img組件逛尚，src請求一個后臺地址垄惧。
- 點擊圖片，傳遞隨機(jī)數(shù)绰寞，獲取隨機(jī)驗證碼到逊。
- 下面代碼基于Thymeleaf，因此使用了th:src屬性滤钱。普通的頁面的話觉壶，可以直接使用src屬性。
<span class="yzm-pic">
<img th:src="@{/ran/random}" th-alt="驗證碼件缸，點擊圖片更換" onclick="this.src='/ran/random?random='+Math.random();" />
</span>
注意：
其實铜靶，onclick是一個難點，點擊之后傳遞一個隨機(jī)數(shù)他炊。使用this.src重新給該圖片賦值争剿。
實現(xiàn)后臺控制方法
最終是使用ImageIO方法進(jìn)行驗證碼的繪制。
@RequestMapping({"/ran/random"})
public void genericRandomCode(HttpServletRequest request, HttpServletResponse response) throws IOException {
response.setHeader("Cache-Control", "private,no-cache,no-store");
response.setContentType("image/png");
byte width = 85;
byte height = 28;
BufferedImage image = new BufferedImage(width, height, 2);
Graphics2D g = image.createGraphics();
g.setComposite(AlphaComposite.getInstance(3, 1.0F));
Random random = new Random();
g.setColor(new Color(231, 231, 231));
g.fillRect(0, 0, width, height);
g.setFont(new Font("Microsoft YaHei", 2, 24));
String sRand = "";
for(int responseOutputStream = 0; responseOutputStream < 4; ++responseOutputStream) {
String rand = String.valueOf(random.nextInt(10));
sRand = sRand + rand;
g.setColor(new Color(121, 143, 96));
g.drawString(rand, 13 * responseOutputStream + 16, 23);
}
g.dispose();
ServletOutputStream var12 = response.getOutputStream();
ImageIO.write(image, "png", var12);
var12.close();
}
- for循環(huán)里面控制了一下隨機(jī)數(shù)的位數(shù)痊末，這里為4位蚕苇。
通過以上方法，實現(xiàn)了隨機(jī)校驗碼舌胶。
