Simple web QR maker with zxing and Thymeleaf
Tags: java, thymeleaf, qr
Published: 2024-06-18 04:52:20

---
title: Simple web QR maker with zxing and Thymeleaf
published: true
date: 2024-06-17 06:00:00 UTC
tags: java,thymeleaf,qr,java
canonical_url: https://jsedano.dev/java/thymeleaf/qr/2024/06/17/simple-qr.html
---

Encode text into QR Code with [zxing](https://github.com/zxing/zxing) and display it using thymeleaf. Live demo [here](https://demo.jsedano.dev/simpleqr/).

You can find the complete code for this [here](https://github.com/jsedano/simple-qr).

This is the method to encode a String into an image, and then encode the image into a base 64 String that represents the png, based around the code in this [tutorial](https://www.digitalocean.com/community/tutorials/java-qr-code-generator-zxing-example).

[QRCreator.java](https://github.com/jsedano/simple-qr/blob/main/src/main/java/dev/jsedano/simpleqr/service/QRCreator.java)

```
  private String unsafeCreateQRImage(String qrCodeText, int size)
      throws WriterException, IOException {
    // Create the ByteMatrix for the QR-Code that encodes the given String
    Hashtable<EncodeHintType, ErrorCorrectionLevel> hintMap = new Hashtable<>();
    hintMap.put(EncodeHintType.ERROR_CORRECTION, ErrorCorrectionLevel.L);
    BitMatrix byteMatrix =
        qrCodeWriter.encode(qrCodeText, BarcodeFormat.QR_CODE, size, size, hintMap);
    // Make the BufferedImage that are to hold the QRCode
    int matrixWidth = byteMatrix.getWidth();
    BufferedImage image = new BufferedImage(matrixWidth, matrixWidth, BufferedImage.TYPE_INT_RGB);
    image.createGraphics();

    Graphics2D graphics = (Graphics2D) image.getGraphics();
    graphics.setColor(Color.WHITE);
    graphics.fillRect(0, 0, matrixWidth, matrixWidth);
    // Paint and save the image using the ByteMatrix
    graphics.setColor(Color.BLACK);

    for (int i = 0; i < matrixWidth; i++) {
      for (int j = 0; j < matrixWidth; j++) {
        if (byteMatrix.get(i, j)) {
          graphics.fillRect(i, j, 1, 1);
        }
      }
    }
    ByteArrayOutputStream bos = new ByteArrayOutputStream();
    ImageIO.write(image, "png", bos);
    byte[] imageBytes = bos.toByteArray();

    Base64.Encoder encoder = Base64.getEncoder();
    return encoder.encodeToString(imageBytes);
  }
```

Use this on the `controller` for the thymeleaf templates.

[SimpleQRController.java](https://github.com/jsedano/simple-qr/blob/main/src/main/java/dev/jsedano/simpleqr/controller/SimpleQRController.java)

```
  @RequestMapping("/")
  public String newRandomSelect(Model model) {
    model.addAttribute("textAndQRImage", new TextAndQRImage());
    return "inputQR";
  }

  @RequestMapping("/show")
  public String showQR(Model model, TextAndQRImage textAndQRImage, HttpSession session) {
    if (Objects.isNull(textAndQRImage.getText()) || textAndQRImage.getText().isEmpty()) {
      return "redirect:/simpleqr/";
    }
    String qrImage = qrCreator.createQRImage(textAndQRImage.getText(), 800);
    if (Objects.isNull(qrImage) || qrImage.isEmpty()) {
      return "redirect:/simpleqr/";
    }
    textAndQRImage.setText(textAndQRImage.getText());
    textAndQRImage.setBase64Image(qrCreator.createQRImage(textAndQRImage.getText(), 800));

    model.addAttribute("textAndQRImage", textAndQRImage);
    return "showQR";
  }
```

Part of [inputQR.html](https://github.com/jsedano/simple-qr/blob/main/src/main/resources/templates/inputQR.html) that asks for the text that will be encoded into a QR code.

```
    <form action="/simpleqr/show" th:object="${textAndQRImage}" method="POST">

        <input type="text" placeholder="input text here" th:field="*{text}">

        <button type="submit">Generate QR</button>
    </form>
```

And then we display the QR code in [showQR.html](https://github.com/jsedano/simple-qr/blob/main/src/main/resources/templates/showQR.html) template.

```
<body>

    <div>
        <img class="img-responsive" th:src="@{'data:image/png;base64,'+${textAndQRImage.base64Image}}"/>
    </div>

<h2 th:text=${textAndQRImage.text}></h2>
</body>
```

Download the complete code for this here: [simple-qr code](https://github.com/jsedano/simple-qr). Live demo on: [simple-qr live](https://demo.jsedano.dev/simpleqr/).