[JAVA] Ein einfaches Beispiel für die Anzeige von QRCode auf einer Website mit JSP + ZXing

Ein Bekannter, der die JSP-Site verwaltet, sagte: "Ich möchte den QRCode anzeigen", also habe ich ihn über das Wochenende ausprobiert.

In Java wird häufig OSS (Apache License 2.0) ZXing verwendet, daher handelt es sich um ein Memo, das auf der JSP-Website enthalten ist.

Tatsächlicher Webbildschirm

Geben Sie die URL, die Sie in QRCode angeben möchten, auf dem folgenden Eingabebildschirm ein und klicken Sie auf "Senden". image.png Konvertieren Sie die URL in QRCode und zeigen Sie sie wie unten gezeigt an. Klicken Sie auf "Zurück", um zur ursprünglichen Seite zurückzukehren. image.png

Entwicklungsumgebung

Die diesmal verwendete Entwicklungsumgebung ist die Java EE-Perspektive von Eclipse 2020-09 (4.17.0), und Tomcat v8.5 ist zusätzlich für den Server angegeben.

Der rote Rahmen ist die Datei, die für diese Zeit hinzugefügt und erstellt wurde. image.png Die zugehörige JAR-Datei wird nach WebContent / WEB-INF / lib kopiert.

ZXing Ich kann das JAR nicht im Repository finden, daher [ZXing Core] im MVN-Repository (https://mvnrepository.com/artifact/com.google.zxing/core). Sie können es von ZXing Java SE Extensions herunterladen.

jaxb-api-2.3.1.jar wird in einer Umgebung wie Java8 möglicherweise nicht benötigt. Wenn Sie eine Fehlermeldung erhalten, beziehen Sie diese bitte von JAXB API des MVN Repository und platzieren Sie sie.

Tatsächlicher Code

Eingabeseite

Die Eingabeseite ist eine normale HTML-Seite. Es ist sehr einfach, fügen Sie einfach ein Formularelement zur Bootstrap-Vorlage hinzu (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"> <!--Ziel-JSP-Seite-->
        <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-Seite

Hier ist der Teil, der die Eingabe empfängt und den QRCode generiert. Ich denke, der Code ist unkompliziert, da das ZXing-Beispiel so wie es ist in JSP konvertiert wird.

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-Klasse

Diesmal ist der Punkt die Klasse BufferedImageUtil.

Ich habe nach einem Java-Beispiel für ZXing gesucht, aber viele Beispiele für die Ausgabe in eine Datei wurden getroffen. Bei Webdiensten möchten Sie jedoch vermeiden, temporäre Dateien zu erstellen, wenn Sie können.

Aus diesem Grund habe ich eine einfache Funktion namens "convert2DataURI" vorbereitet, die einen Daten-URI direkt aus einem BufferedImage-Objekt generiert.

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());
	}
}

Ich überspringe die Fehlerbehandlung. Bei der tatsächlichen Verwendung empfiehlt es sich, den Daten-URI des Fehlerbilds im Voraus vorzubereiten und bei Auftreten eines Problems zurückzugeben.

Lizenz

Der gesamte Code, den ich in diesem Beitrag schreibe, ist unter Creative Commons Zero lizenziert. Fühlen Sie sich frei, es zu benutzen.

Enjoy!

Wie oben erwähnt, habe ich versucht, die QRCode-Anzeige auf der von JSP erstellten Website zu implementieren. Fügen Sie auf dieser Grundlage verschiedene Funktionen hinzu und spielen Sie damit.

wir sehen uns!

Recommended Posts

Ein einfaches Beispiel für die Anzeige von QRCode auf einer Website mit JSP + ZXing
Ein einfaches CRUD-Beispiel mit Java Servlet / JSP und MySQL
Erhalten Sie Wettervorhersagen von Watson Weather Company Data mit einer einfachen JSP
Führen Sie ein einfaches Modell aus, das mit Keras unter iOS mit CoreML erstellt wurde
Erstellen Sie einen einfachen Gateway-Server, indem Sie die Maskerade mit der Firewall-cmd von CentOS8 festlegen