[JAVA] Un exemple simple d'affichage de QRCode sur un site Web avec JSP + ZXing

Une connaissance qui gère le site JSP a dit: "Je veux afficher le QRCode", alors je l'ai essayé ce week-end.

En Java, OSS (Apache License 2.0) ZXing semble être souvent utilisé, il s'agit donc d'un mémo incorporé dans le site JSP.

Écran Web réel

Entrez l'URL que vous souhaitez spécifier dans QRCode sur l'écran de saisie suivant et cliquez sur «Soumettre». image.png Convertissez l'URL en QRCode et affichez-la comme indiqué ci-dessous. Cliquez sur "Retour" pour revenir à la page d'origine. image.png

Environnement de développement

L'environnement de développement utilisé cette fois est la perspective Java EE de Eclipse 2020-09 (4.17.0), et Tomcat v8.5 est également spécifié pour le serveur.

Le cadre rouge est le fichier ajouté et créé pour cette fois. image.png Le fichier jar associé est copié dans `` WebContent / WEB-INF / lib ''.

ZXing Je ne trouve pas le pot dans le référentiel, donc [ZXing Core] dans le référentiel MVN (https://mvnrepository.com/artifact/com.google.zxing/core) Vous pouvez l'obtenir à partir des Extensions ZXing Java SE.

jaxb-api-2.3.1.jar peut ne pas être nécessaire dans un environnement tel que Java8. Si vous obtenez une erreur, veuillez l'obtenir à partir de l 'API JAXB du référentiel MVN et placez-la.

Code réel

Page d'entrée

La page d'entrée est une page HTML standard. C'est très simple, ajoutez simplement un élément de formulaire au modèle Bootstrap (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"> <!--Page JSP de destination-->
        <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>

Page JSP

Maintenant, voici la partie qui reçoit l'entrée et génère le QRCode. Je pense que le code est simple car l'exemple ZXing est converti en JSP tel quel.

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>

Classe BufferedImageUtil

Cette fois, le point est la classe BufferedImageUtil.

J'ai cherché un échantillon Java de ZXing, mais de nombreux exemples de sortie dans un fichier ont été atteints. Mais pour les services Web, vous voulez éviter de créer des fichiers temporaires si vous le pouvez.

C'est pourquoi j'ai préparé une fonction simple appelée `` convert2DataURI '' qui génère un URI de données directement à partir d'un objet BufferedImage.

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

Je saute la gestion des erreurs. Lors de son utilisation, il est judicieux de préparer à l'avance l'URI de données de l'image d'erreur et de le renvoyer en cas de problème.

Licence

Tout le code que j'écris dans cet article est sous licence à Creative Commons Zero. Sentez-vous libre de l'utiliser.

Enjoy!

Comme mentionné ci-dessus, j'ai essayé d'implémenter l'affichage QRCode sur le site Web créé par JSP. Sur cette base, veuillez ajouter diverses fonctions et jouer avec.

à plus!

Recommended Posts

Un exemple simple d'affichage de QRCode sur un site Web avec JSP + ZXing
Un exemple CRUD simple utilisant Java Servlet / JSP et MySQL
Obtenez les prévisions météorologiques de Watson Weather Company Data avec une simple JSP
Exécutez un modèle simple réalisé avec Keras sur iOS à l'aide de CoreML
Créez un serveur de passerelle simple en définissant masquerade avec firewall-cmd de CentOS8