优化验证码的效果和干扰

README.md

@@ -1,14 +1,35 @@
 # EasyCaptcha
-JavaWeb图形验证码，支持gif验证码，可用于基于的session的web项目和前后端分离的项目。
 
-## 效果展示
+## 1.简介
-![验证码](http://115.159.40.243:8080/EasyWeb/image/captcha?codeKey=a)
+
-刷新页面可以重新生成验证码图片。 
+  Java图形验证码，支持gif验证码，可用于Java Web、JavaSE和Android项目。
- 
+
-## 导入项目
+
-### gradle方式的引入
+## 2.效果展示
+
+**gif效果：**
+
+![验证码](https://ws1.sinaimg.cn/large/006a7GCKgy1ftog813jz9g303m01cjrc.jpg) 
+  
+![验证码](https://ws1.sinaimg.cn/large/006a7GCKgy1ftogh8z6hug303m01cdfs.jpg)
+  
+![验证码](https://ws1.sinaimg.cn/large/006a7GCKgy1ftoghsymykg303m01c3yg.jpg)
+
+**png效果：**
+
+![验证码](https://ws1.sinaimg.cn/large/006a7GCKgy1ftogec24tbj303m01cmwx.jpg)
+  
+![验证码](https://ws1.sinaimg.cn/large/006a7GCKgy1ftogf2vvodj303m01cjr5.jpg)
+  
+![验证码](https://ws1.sinaimg.cn/large/006a7GCKgy1ftogfxh2rwj303m01cjr5.jpg)
+
+
+
+## 3.导入项目
+
+### 2.1.gradle方式的引入
 需要先在project的build.gradle中添加：
-```
+```text
 allprojects {
     repositories {
         maven { url 'https://jitpack.io' }
@@ -16,14 +37,16 @@ allprojects {
 }
 ```
 在项目的build.gradle中添加
-```
+```text
 dependencies {
-    compile 'com.github.whvcse:EasyCaptcha:1.1.0'
+    compile 'com.github.whvcse:EasyCaptcha:1.2.0'
 }
 ```
 
-### maven方式引入
+### 2.2.maven方式引入
+在你的pom.xml中添加如下代码：
 ```xml
+<project>
     <repositories>
         <repository>
         <id>jitpack.io</id>
@@ -38,16 +61,24 @@ dependencies {
           <version>1.1.0</version>
        </dependency>
     </dependencies>
+</project>
+
 ```
 
-### jar包下载
+### 2.3.jar包下载
-[EasyCaptcha-1.1.0.jar](https://github.com/whvcse/EasyCaptcha/releases)
+[EasyCaptcha-1.2.0.jar](https://github.com/whvcse/EasyCaptcha/releases)
 
-## 使用方法
+
-### 快速使用
+---
+
+
+## 3.使用方法
+
+### 3.1.快速使用
 1.在web.xml里面加入如下配置：
 ```xml
-<!-- 图形验证码 -->
+<web-app>
+    <!-- 图形验证码servlet -->
     <servlet>
         <servlet-name>CaptchaServlet</servlet-name>
         <servlet-class>com.wf.captcha.servlet.CaptchaServlet</servlet-class>
@@ -56,22 +87,23 @@ dependencies {
         <servlet-name>CaptchaServlet</servlet-name>
         <url-pattern>/images/captcha</url-pattern>
     </servlet-mapping>
+</web-app>
+
 ```
 2.前端代码
 ```html
 <img src="/images/captcha" />
 ```
 
-### 在*SpringMVC*中使用
+### 3.2.在SpringMVC中使用
-如果你不想使用项目提供的servlet，可以使用controller的形式实现，方法也很简单，代码如下：
+也可以使用controller的形式输出验证码，方法如下：
 ```java
+@Controller
+public class MainController {
+    
     @RequestMapping("/images/captcha")
-public void captcha(HttpServletRequest request, HttpServletResponse response) {
+    public void captcha(HttpServletRequest request, HttpServletResponse response) throws Exception {
-    CaptchaUtil captcha = new CaptchaUtil();
+        CaptchaUtil.out(request, response);
-    try {
-        captcha.out(request, response);
-    } catch (IOException e) {
-        e.printStackTrace();
     }
 }
 ```
@@ -80,55 +112,38 @@ public void captcha(HttpServletRequest request, HttpServletResponse response) {
 <img src="/images/captcha" />
 ```
 
-### 前后端分离中使用
+### 3.3.判断验证码是否正确
-验证码一般都是保存在session中的，但是在前后端分离的项目中，不推荐使用session存储，可使用如下方式：
+
 ```java
+@Controller
+public class LoginController {
+    
+    @PostMapping("/login")
+    public JsonResult login(String username,String password,String code){
+        
+        if (CaptchaUtil.ver(code, request)) {
+            return JsonResult.error("验证码不正确");
+        }
+    }   
+}
+```
+
+### 3.4.设置宽高和位数
+```java
+@Controller
+public class MainController {
+    
     @RequestMapping("/images/captcha")
-public void captcha(String key, HttpServletRequest request, HttpServletResponse response) {
+    public void captcha(HttpServletRequest request, HttpServletResponse response) throws Exception {
-    CaptchaUtil captcha = new CaptchaUtil();
+        // 设置位数
-    try {
+        CaptchaUtil.out(5, request, response);
-        captcha.out(key, request, response);
+        
-    } catch (IOException e) {
+        // 设置宽、高、位数
-        e.printStackTrace();
+        CaptchaUtil.out(130, 48, 5, request, response);
     }
 }
 ```
-与前面的使用区别就在于多了一个key，使用的时候需要前端生成一个随机key传递过来，服务器是已这个key为名字存储在servletContext中的，取的时候需要根据这个key取值。
 
-前后端分离也同样可以使用框架自带的servlet，使用方式如下：
+## 4.更多设置
-```html
-<img src="/images/captcha?key=xxx" />
-<!-- 此处的key应该有js随机生成，并且js在验证的时候也需要传递这个key -->
 
-```
+###
-
-### 判断验证码是否正确
-基于session存储的判断：
-```java
-CaptchaUtil captcha = new CaptchaUtil();
-if (captcha == null || !captcha.ver(code, request)) {
-    return JsonResult.error("验证码不正确");
-}
-```
-前后端分离方式的判断：
-```java
-CaptchaUtil captcha = new CaptchaUtil();
-if (captcha == null || !captcha.ver(key, code, request)) {
-    return JsonResult.error("验证码不正确");
-}
-//此处的key便是生成的时候传递的key
-```
-
-
-### 参数设置
-#### 设置宽高和位数
-```java
-//三个参数分别是宽、高、位数
-CaptchaUtil captcha = new CaptchaUtil(130, 38, 5);
-```
-#### 修改存储时候的key
-```java
-CaptchaUtil captcha = new CaptchaUtil();
-captcha.setCodeName("captcha");
-```
-默认存在session中是以captcha为key存储的，存储在servletContext中是以captcha-xxx为key存储的，xxx是生成的时候前端传递的key。

pom.xml

@@ -9,7 +9,7 @@
     <packaging>jar</packaging>
 
     <name>EasyCaptcha</name>
-    <description>Java web图形验证码，支持gif验证码。</description>
+    <description>Java图形验证码，支持gif验证码。</description>
     <url>https://github.com/whvcse/EasyCaptcha</url>
 
     <licenses>

src/test/java/com/wf/captcha/CaptchaTest.java

@@ -15,13 +15,13 @@ public class CaptchaTest {
     public void test() throws Exception {
         SpecCaptcha specCaptcha = new SpecCaptcha();
         System.out.println(specCaptcha.text());
-        specCaptcha.out(new FileOutputStream(new File("D:/a/aa.png")));
+        //specCaptcha.out(new FileOutputStream(new File("D:/a/aa.png")));
     }
 
     @Test
     public void testGIf() throws Exception {
         GifCaptcha specCaptcha = new GifCaptcha(130, 48, 5);
         System.out.println(specCaptcha.text());
-        specCaptcha.out(new FileOutputStream(new File("D:/a/aa.gif")));
+        //specCaptcha.out(new FileOutputStream(new File("D:/a/aa.gif")));
     }
 }