HI akiraly good cage,but can not set background imgae

[zzyyit]

[sin66x]

I made it by using these codes: 1- A servlet like

/*
 * Copyright 2011 Király Attila
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
package com.example.config;

import com.github.cage.Cage;
import com.github.cage.GCage;
import com.rqbank.pishkhan.apiinterface.session.SessionHandler;
import com.rqbank.pishkhan.apiinterface.util.CommonUtil;
import org.bouncycastle.mime.encoding.Base64OutputStream;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;

/**
 * An example servlet that generates captcha images directly to the response
 * stream.
 * 
 * @author akiraly
 * 
 */

@WebServlet("/captcha")
public class CaptchaServlet extends HttpServlet {

	private static final long serialVersionUID = 1490947492185481844L;


	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		GCage gCage = new GCage();
		String token = CommonUtil.generateCaptcha(6);
		String sessionId = Captcha.addCaptcha(token);
		response.setContentType("image/"+gCage.getFormat());
		response.setHeader("Cache-Control", "no-cache");
		response.setHeader("Access-Control-Allow-Origin", "*");
		response.setDateHeader("Expires", 0);
		response.setHeader("Progma", "no-cache");
		response.setDateHeader("Max-Age", 0);
		response.setHeader("SessionId", sessionId);
		gCage.draw(token, new Base64OutputStream(response.getOutputStream()));
	}

	private static final Cage cage = new GCage();

	/**
	 * Generates a captcha token and stores it in the session.
	 * 
	 * @param session
	 *            where to store the captcha.
	 */
	public static void generateToken(HttpSession session) {
		final String token = cage.getTokenGenerator().next();

		session.setAttribute("captchaToken", token);
		markTokenUsed(session, false);
	}

	/**
	 * Used to retrieve previously stored captcha token from session.
	 * 
	 * @param session
	 *            where the token is possibly stored.
	 * @return token or null if there was none
	 */
	public static String getToken(HttpSession session) {
		final Object val = session.getAttribute("captchaToken");

		return val != null ? val.toString() : null;
	}

	/**
	 * Marks token as used/unused for image generation.
	 * 
	 * @param session
	 *            where the token usage flag is possibly stored.
	 * @param used
	 *            false if the token is not yet used for image generation
	 */
	protected static void markTokenUsed(HttpSession session, boolean used) {
		session.setAttribute("captchaTokenUsed", used);
	}

	/**
	 * Checks if the token was used/unused for image generation.
	 * 
	 * @param session
	 *            where the token usage flag is possibly stored.
	 * @return true if the token was marked as unused in the session
	 */
	protected static boolean isTokenUsed(HttpSession session) {
		return !Boolean.FALSE.equals(session.getAttribute("captchaTokenUsed"));
	}

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		final HttpSession session = req.getSession(false);
		final String token = session != null ? getToken(session) : null;
		if (token == null || isTokenUsed(session)) {
			resp.sendError(HttpServletResponse.SC_NOT_FOUND,
					"Captcha not found.");

			return;
		}

		setResponseHeaders(resp);
		markTokenUsed(session, true);
		cage.draw(token, resp.getOutputStream());
	}

	/**
	 * Helper method, disables HTTP caching.
	 * 
	 * @param resp
	 *            response object to be modified
	 */
	protected void setResponseHeaders(HttpServletResponse resp) {
		resp.setContentType("image/" + cage.getFormat());
		resp.setHeader("Cache-Control", "no-cache, no-store");
		resp.setHeader("Pragma", "no-cache");
		final long time = System.currentTimeMillis();
		resp.setDateHeader("Last-Modified", time);
		resp.setDateHeader("Date", time);
		resp.setDateHeader("Expires", time);
	}
}

2- An HTML/JS Like:

<html>
<script src="jquery-3.3.1.min.js"></script>
<script>
    $.ajax({
        type : 'GET',
        url : '/captcha',
        success : function(data,status,xhr) {
            $('#captcha').attr('style', ('background: url(data:image/jpg;base64,'+data+');height: 32px;\n' +
                '    width: 179px;\n' +
                '    background-size: 90px;\n' +
                '    background-repeat: no-repeat;\n' +
                '    background-position: right').replace(/\s+/g, ''));
        }
    });
</script>
<body>
<input id="captcha" placeholder="Captcha" >

</body>
</html>

Of course if you want to use it you should add JQuery library.

=============

The mail issue was that JS adds white spaces in the base64 data, you could delete it by .replace(/\s+/g, '')