我要评论图例如下
具体操作如下：
新建一个servlet，代码如下：标记一个webservlet,
1 @webservlet(urlpatterns = {"/checkcode"}) //验证码servlet
绘制验证码图片的核心代码：
int width = 100;
int height = 50;
//创建图片对象
bufferedimage image = new bufferedimage(width, height, bufferedimage.type_int_rgb);
//美化图片
graphics g = image.getgraphics();
//1：填充背景
g.setcolor(color.pink);
g.fillrect(0, 0, width, height);
//画边框
g.setcolor(color.blue);
g.drawrect(0, 0, width - 1, height - 1);
//生成一个验证码字符串
string strcheckcode = "abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz0123456789";
random random = new random();
strcheckcode = "";
for (int i = 1; i <= 4; i++) {
int index = random.nextint(strcheckcode.length());
char ch = strcheckcode.charat(index);
strcheckcode += ch;//拼接验证码
g.drawstring(ch + "", width / 5 * i, height / 2);
}
//画干扰线
for (int i = 0; i < 5; i++) {
int x1 = random.nextint(width);
int x2 = random.nextint(width);
int y1 = random.nextint(height);
int y2 = random.nextint(height);
g.drawline(x1, x2, y1, y2);
}
//输出，显示出来
imageio.write(image, "jpg", resp.getoutputstream());
}
首先是new一个bufferedimage，然后给定长和宽，之后是指边框和背景色，接着使用随机数生成4个字符绘制在图片上，接着使用drawline绘随机制干扰线，
然后在前端页面引入图片，然后给图片绑定点击事件，点击后重新访问servlet即可：
//点击验证码图片，重新生成新验证
$(function () {
$("#imgcheckcode").click(function () {
var img = document.getelementbyid("imgcheckcode");
var date = new date();
img.src = "http://www.lhsxpumps.com/_localhost:8080/blogs_war_exploded/checkcode?op=setcheckcode&a=" + date;
})
})
<div class="inputcheckcode">
<div class="inputcheckcodeleftico">➤</div>
<div class="inputcheckcoderightinput">
<input type="text" name="checkcode" id="checkcode" placeholder="验证码" autocomplete="off"/>
</div>
<img src="http://localhost:8080/blogs_war_exploded/checkcode?op=setcheckcode" id="imgcheckcode">
</div>
最后输出即可，效果如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论