JAVA使用BASE64生成驗證碼

public void createImage(HttpServletResponse resp, HttpServletRequest request,String xcode) throws IOException {
        TraceLoggerUtil.info("執行微信端圖片驗證碼接口請求參數:xcode{}",xcode);
        switch (random.nextInt(5)) {
            case 0:
                cs.setFilterFactory(new CurvesRippleFilterFactory(cs.getColorFactory()));
                break;
            case 1:
                cs.setFilterFactory(new MarbleRippleFilterFactory());
                break;
            case 2:
                cs.setFilterFactory(new DoubleRippleFilterFactory());
                break;
            case 3:
                cs.setFilterFactory(new WobbleRippleFilterFactory());
                break;
            case 4:
                cs.setFilterFactory(new DiffuseRippleFilterFactory());
                break;
        }
        HttpSession session = request.getSession(false);
        if (session == null) {
            session = request.getSession();
        }
        if (ChkUtil.isEmpty(xcode)) {
            return;
        }

        setResponseHeaders(resp);
        String token = EncoderHelper.getChallangeAndWriteImage(cs, "png", resp.getOutputStream());
        redisService.setex(xcode, token, 5*60);

        session.setAttribute(PubVariable.VERIFICATION_CODE_SESSION, token);
    }

    protected void setResponseHeaders(HttpServletResponse response) {
        response.setContentType("image/png");
        response.setHeader("Cache-Control", "no-cache, no-store");
        response.setHeader("Pragma", "no-cache");
        long time = System.currentTimeMillis();
        response.setDateHeader("Last-Modified", time);
        response.setDateHeader("Date", time);
        response.setDateHeader("Expires", time);
    }

 

今天遇到一個需求需要將生成驗證碼的接口修改為可以返回狀態的接口。之前的代碼是以流的形式直接返回后台，返回值為void。使用的是com.github.bingoohuang的jar包。

但是出現問題是現在需要返回帶有狀態的json串，然后將圖片信息放在參數內，給前端在status為200的時候才展示圖片信息。這時候可以將隨機驗證碼圖片進行Base64編碼之后前端使用。

以下貼代碼：

 

 

public String createImage(HttpServletResponse resp, HttpServletRequest request
        ,String xcode,String phone,String from ) {
    JSONObject resultObject = new JSONObject();

 TraceLoggerUtil.info("執行微信端圖片驗證碼接口請求參數:xcode{},phone{},from{}",xcode,phone,from);

 try{
 /**
 * from =1 的時候需要判斷當前手機號是否存在 如果存在直接返回300 手機號已存在
 */
 if (!ChkUtil.isEmpty(from) && "1".equals(from)) {
 JSONObject phoneJson = JSONObject.parseObject(bgCustomerService.getCustomer(phone));
 if (phoneJson.get(com.zw.rule.util.weChatUtil.consts.MsgConsts.RESPONSE_CODE).equals(com.zw.rule.util.weChatUtil.consts.MsgConsts.WECHAT_ERRO_CODE)) {
 resultObject.put(com.zw.base.util.MsgConsts.WECHAT_RESPONSE_STATUS, com.zw.base.util.MsgConsts.WECHAT_ERROR_STATUS_CODE);
 resultObject.put(com.zw.base.util.MsgConsts.WECHAT_RESPONSE_MESSAGE, "手機號已存在");
 return resultObject.toString();
 }
 }
 /**
 * from =2 的時候需要判斷當前手機號是否存在 如果存在直接返回300 手機號不存在
 */
 if (!ChkUtil.isEmpty(phone) && "2".equals(phone)) {
 JSONObject phoneJson = JSONObject.parseObject(bgCustomerService.getCustomer(phone));
 if (phoneJson.get(com.zw.rule.util.weChatUtil.consts.MsgConsts.RESPONSE_CODE).equals(com.zw.rule.util.weChatUtil.consts.MsgConsts.SUCCESS_CODE)) {
 resultObject.put(com.zw.base.util.MsgConsts.WECHAT_RESPONSE_STATUS, com.zw.base.util.MsgConsts.WECHAT_ERROR_STATUS_CODE);
 resultObject.put(com.zw.base.util.MsgConsts.WECHAT_RESPONSE_MESSAGE, "手機號不存在");
 return resultObject.toString();
 }
 }


 // 禁止圖像緩存,使得單擊驗證碼可以刷新驗證碼圖片
 resp.setHeader("Pragma", "nocache");
 resp.setHeader("Cache-Control", "no-cache");
 resp.setDateHeader("Expires", 0);
 resp.setContentType("image/jpeg");
 resp.setHeader("Access-Control-Allow-Origin", "*");

 BufferedImage bim = new BufferedImage(100, 40,
 BufferedImage.TYPE_INT_RGB);
 Font f = new Font("宋體",Font.BOLD ,20);
 Graphics2D gc = bim.createGraphics();
 //設置字體
 gc.setFont(f);
 // 設置圖片填充顏色
 gc.setColor(Color.yellow);
 gc.fillRect(0, 0, 100, 40);
 // 設置邊框顏色
 gc.setColor(Color.pink);
 gc.drawRect(0, 0, 99, 39);
 // 產生4位隨機數
 Random rand = new Random();
 StringBuffer sb = new StringBuffer();
 // 設置干擾線顏色
 gc.setColor(Color.cyan);
 for (int j = 0; j < 30; j++) {
 int x = rand.nextInt(99);
 int y = rand.nextInt(39);
 int x1 = rand.nextInt(6);
 int y1 = rand.nextInt(6);
 // 往圖片里面畫干擾線
 gc.drawLine(x, y, x + x1, y + y1);
 }

 for (int i = 0; i < 4; i++) {
 int m = rand.nextInt(9);
 // 將生成的數字寫入到圖片中去,int轉成string
 String str = String.valueOf(m);
 // 設置字體顏色
 gc.setColor(Color.RED);
 gc.drawString(str, i * 20 + 20, 30);
 sb.append(m);
 }
 // 將stringbuffer轉成string
 String sb1 = String.valueOf(sb);
 redisService.setex(xcode, sb1, 5*60);

 // 將圖片以流的形式輸出
 ServletOutputStream sos = resp.getOutputStream();

 //ImageIO.write(bim, "jpg", sos);
 // 創建編碼對象
 Base64.Encoder base64 = Base64.getEncoder();
 // 創建字符流
 ByteArrayOutputStream bs = new ByteArrayOutputStream();
 // 寫入字符流
 ImageIO.write(bim, "jpg", bs);
 // 轉碼成字符串
 String imgsrc = base64.encodeToString(bs.toByteArray());

 resultObject.put("imgsrc",imgsrc);
 resultObject.put(com.zw.base.util.MsgConsts.WECHAT_RESPONSE_STATUS, com.zw.base.util.MsgConsts.WECHAT_SUCCESS_STATUS_CODE);
 resultObject.put(com.zw.base.util.MsgConsts.WECHAT_RESPONSE_MESSAGE, com.zw.base.util.MsgConsts.WECHAT_MESSAGE_SUCCESS);
 }catch (Exception e){
 TraceLoggerUtil.error(e.getMessage(),e);
 resultObject.put(com.zw.base.util.MsgConsts.WECHAT_RESPONSE_STATUS, com.zw.base.util.MsgConsts.WECHAT_ERROR_STATUS_CODE);
 resultObject.put(com.zw.base.util.MsgConsts.WECHAT_RESPONSE_MESSAGE, com.zw.base.util.MsgConsts.SYS_EXCEPTION);
 return resultObject.toString();
 }
 return resultObject.toString();
}

 

 

 

以下代碼有變更點：

1.resp.setHeader("Access-Control-Allow-Origin", "*"); 這是由於前端使用ajax訪問的時候跨域了，設置這個之后就不會跨域訪問

2.Font f = new Font("宋體",Font.BOLD ,20); gc.setFont(f); 這里是由於字體偏小，所以調大字體為宋體20號

3.gc.fillRect(0, 0, 100, 40);  gc.drawRect(0, 0, 99, 39); int x = rand.nextInt(99); int y = rand.nextInt(39);

個人理解這些數字都和最后返回的圖片有關。返回前端圖片為100*40那么 drawRect 的最后兩個數字為 100-1 40-1  int x為100-1 int y 為40 -1

4.gc.drawString(str, i * 20 + 20, 30);  這個根據圖片的寬和高計算，最終數字的位置為20,40,60,80 高固定在30 

以上這些需要根據前端需要自行調節。

 

 

前端使用方式為：

<img src=”data:image/jpg;base64,imgcode”> imgcode 就是返回回去的base64位的imgsrc

點擊后動態的賦值即可。