一、介绍:
操作流程:
①创建一个工具类:用画笔将图片画出来。
②编写接口调用工具类将图片传给前台。
③前台将获取的数据赋给图片的路径。
二、使用列子:
1.html
<!--图片验证码--> <div> <div> <input type="text" id="codeYZM" placeholder="请输入验证码" maxlength="4"> </div> <div> <a href="javascript:void(0);" title="点击更换验证码"> <img id="imgYZM" src="" alt="更换验证码" onclick="getYZM(this);"> </a> </div> </div> <script type="text/javascript"> var imgYZM = $("#imgYZM").get(0); $(function () { getYZM(imgYZM); }); // 图片验证码 function getYZM(obj) { obj.src = httpRequestUrl+"/getYZMPic?"+Math.random(); } </script>
2.接口
@RequestMapping(value="/getYZMPic",method = RequestMethod.GET) public void getYZMPic(HttpServletResponse response, HttpSession session) { OutputStream out = null; try { // 设置响应类型 response.setContentType("image/jpg"); // 获取创建验证码工具类实例 CreateYZMCodeUtils yzm = CreateYZMCodeUtils.getInstance(); // 获取生成的验证码字符串 String code = yzm.getCreateYZMCode(); // 将验证码存放在session session.setAttribute("code", code); // 获取验证码图片 BufferedImage img = yzm.getCreateYZMImg(code); out = response.getOutputStream(); // 通过ImageIO写出图片 ImageIO.write(img, "jpg", out); out.flush();//强制将缓冲区中的数据发送出去 } catch (IOException e) { e.printStackTrace(); } finally { if (out != null) { try { out.close(); } catch (IOException e) { e.printStackTrace(); } } } }
3.图片验证码工具类:
public class CreateYZMCodeUtils { private Integer width;//验证码图片宽度 private Integer height;//验证吗图片高度 private Integer num;//验证码的个数 private String code;//生成验证码一组字符串 private static final Random ran=new Random();//随机数 private static CreateYZMCodeUtils createYZMCodeUtils; /** * 通过默认构造初始化参数 */ private CreateYZMCodeUtils(){ width=100; height=30; code="123456789adcdefghijklmnopqrstuvwxyz"; num=4; } /** * 利用单利模式创建该验证码工具类 * @return */ public static CreateYZMCodeUtils getInstance(){ if(createYZMCodeUtils==null){ createYZMCodeUtils=new CreateYZMCodeUtils(); } return createYZMCodeUtils; } public Integer getWidth() { return width; } public void setWidth(Integer width) { this.width = width; } public Integer getHeight() { return height; } public void setHeight(Integer height) { this.height = height; } public Integer getNum() { return num; } public void setNum(Integer num) { this.num = num; } public String getCode() { return code; } public void setCode(String code) { this.code = code; } public static Random getRan() { return ran; } public void setCreateYZMCodeUtils(Integer width,Integer height,Integer num,String code){ this.width=width; this.height=height; this.num=num; this.code=code; } public void setCreateYZMCodeUtils(Integer width,Integer height,String code){ this.width=width; this.height=height; this.code=code; } /** * 随机生成验证码 生成验证码的一组字符串 * @return */ public String getCreateYZMCode(){ StringBuffer sb = new StringBuffer(); for (int i = 0; i < num; i++) { sb.append(code.charAt(ran.nextInt(code.length()))); } return sb.toString(); } /** * 生成buffere Image图片 * @param finshCode 生成好的验证码字符串 * @return */ public BufferedImage getCreateYZMImg(String finshCode){ // 创建BufferedImage对象 BufferedImage img = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB); Graphics2D graphic = img.createGraphics();// 创建画笔 graphic.setColor(Color.WHITE);// 设置颜色 graphic.fillRect(0, 0, width, height);//是用预定的颜色填充一个矩形,得到一个着色的矩形块。 graphic.setColor(Color.black); // graphic.drawRect(0, 0, width - 1, height - 1);// 画正方形 // 设置字体 风格 风格 高度 Font font = new Font("微软雅黑", Font.BOLD + Font.ITALIC,(int) (height * 0.8)); graphic.setFont(font); for (int i = 0; i < num; i++) { // 随机设置字体RGB颜色 graphic.setColor(new Color(ran.nextInt(255), ran.nextInt(255),ran.nextInt(255))); // 画出验证码 graphic.drawString(String.valueOf(finshCode.charAt(i)), i* (width / num) + 4, (int) (height * 0.8)); } for (int i = 0; i < (width + height); i++) { // 随机设置字体RGB颜色 graphic.setColor(new Color(ran.nextInt(255), ran.nextInt(255),ran.nextInt(255))); // 生成干扰点 graphic.drawOval(ran.nextInt(width), ran.nextInt(height), 1, 1); } for(int i = 0; i <2; i++){ // 随机设置字体RGB颜色 graphic.setColor(new Color(ran.nextInt(255), ran.nextInt(255),ran.nextInt(255))); // 随机生成干扰线 graphic.drawLine(0, ran.nextInt(height), width,ran.nextInt(height)); } return img; } }