An acquaintance who manages the JSP site said "I want to display the QR Code", so I gave it a try over the weekend.

It seems that ZXing of OSS (Apache License 2.0) is often used in Java, so it is a memo incorporated in the JSP website.

Actual web screen

Enter the URL you want to specify in QRCode on the input screen as shown below and click "Submit". Convert the URL to QRCode and display it as shown below. Click "Back" to return to the original page.

Development environment

The development environment used this time is the Java EE perspective of plain Eclipse 2020-09 (4.17.0), and Tomcat v8.5 is additionally specified for the server.

The red frame is the file added and created for this time. I have copied the relevant jar files to WebContent / WEB-INF / lib.

ZXing I can't find the jar in the repository, so I can't find the jar in the MVN Repository ZXing Core You can get it from ZXing Java SE Extensions.

jaxb-api-2.3.1.jar may not be needed in an environment such as Java8. If you get an error, please get it from JAXB API of MVN Repository and place it.

Actual code

Input page

The input page is a regular html page. It's very simple, just add a form element to the Bootstrap Templates (https://getbootstrap.com/docs/4.5/getting-started/introduction/).

`WebContent/index.html`


<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <title>Simple QR sample with JSP</title>
  </head>
  <body>

<div class="container">
    <h2>Simple QR sample with JSP</h2>
    <form action="/test01/QRCode.jsp"> <!--Destination JSP page-->
        <div class="form-group">
            <label for="i_url">Target URL</label>
            <input type="text" class="form-control" id="i_url" name="i_url">
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </body>
</html>

JSP page

Now, here is the part that receives the input and generates the QRCode. I think the code is straightforward because the ZXing sample is converted to JSP as it is.

`WebContent/QRCode.jsp`


<%@ page import="com.google.zxing.qrcode.QRCodeWriter" %>
<%@ page import="com.google.zxing.common.BitMatrix" %>
<%@ page import="com.google.zxing.BarcodeFormat" %>
<%@ page import="com.google.zxing.client.j2se.MatrixToImageWriter" %>
<%@ page import="java.awt.image.BufferedImage" %>
<%@ page import="test01.BufferedImageUtil" %>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <title>Output of "Simple QR sample with JSP"</title>
</head>
<body>

<%
String i_url = request.getParameter("i_url");
QRCodeWriter qrWriter = new QRCodeWriter();
BitMatrix bitMatrix = qrWriter.encode(i_url, BarcodeFormat.QR_CODE, 300, 300);
BufferedImage bImage = MatrixToImageWriter.toBufferedImage(bitMatrix);
%>

<div class="container">
    <h2>Output of "Simple QR sample with JSP"</h2>
    <p>Target URL: <%= i_url %></p>
    <img src="<%= BufferedImageUtil.convert2DataURI(bImage, "png") %>"/>
    <form action="/test01/">
        <button type="submit" class="btn btn-primary">Back</button>
    </form>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>

BufferedImageUtil class

This time, the point is the BufferedImageUtil class.

I searched for a Java sample of ZXing, but I found many examples of outputting to a file once. But for web services, you want to avoid creating temporary files if you can.

That's why I prepared a simple function called convert2DataURI that generates a Data URI directly from a BufferedImage object.

`Java:test01.BufferedImageUtil.java`


package test01;

import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import javax.imageio.ImageIO;
import javax.xml.bind.DatatypeConverter;

public class BufferedImageUtil {
	public static String convert2DataURI(BufferedImage bi, String type) throws IOException {
		if (bi == null || type == null) {
			return ""; // TODO: Default error image
		}
		ByteArrayOutputStream baos = new ByteArrayOutputStream();
		ImageIO.write(bi, type, baos);
		return "data:image/" + type + ";base64," + DatatypeConverter.printBase64Binary(baos.toByteArray());
	}
}

I'm skipping error handling. When actually using it, it is a good idea to prepare the Data URI of the error image in advance and return it when a problem occurs.

license

All code I write in this post is licensed at Creative Commons Zero. Feel free to use it.

Enjoy!

As mentioned above, I tried to implement the QR Code display on the website created by JSP. Based on this, please add various functions and play with it.

see you!

A simple sample of displaying a QRCode on a website with JSP + ZXing