How to Generate QR Codes Using Mulesoft | MuleSoft Guide

Responsive Author Details .author-details { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; } .author-item { margin: 10px; padding: 10px 15px; border-radius: 15px; background-color: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; position: relative; overflow: hidden; max-width: 250px; height: auto; display: flex; flex-direction: column; align-items: center; } .author-item:before { content: “”; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.8); transform: skewX(-15deg) skewY(10deg); transform-origin: top left; z-index: -1; } .author-item:after { content: “”; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.8); transform: skewX(15deg) skewY(-10deg); transform-origin: bottom right; z-index: -1; } .author-item:hover { transform: translateY(-5px) rotateX(5deg); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } .icon { margin-right: 5px; color: #1a73e8; transition: transform 0.3s ease-in-out; } .author-item:hover .icon { transform: scaleX(-1); } .author-link { color: #1a73e8; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; /* Make links block-level for better control */ width: 100%; } @media (max-width: 768px) { /* No additional styles needed within the media query */ } .author-link:hover { color: #007bff; }

Overview

A QR code (short for “Quick Response Code”) is a type of matrix barcode.

Mulesoft and QR Code Generation

Currently, there is no built-in Mule component for generating QR codes from strings or URIs in Mule 4. However, we can achieve this using a third-party Java library called “ZXing.”  

Solution Approach

This approach involves creating a custom Mule API endpoint. When a user calls this endpoint with a query parameter, it triggers a Java function. The Java function generates the QR code. The function returns an encoded string representing the QR code, which Mulesoft then converts to a PNG format.  

Implementation Steps

1. Java Code (“GenerateQrCode.java”)

This code snippet demonstrates QR code generation using the ZXing Java library. It converts input data (string) into a QR code image.

package com.utils;import com.google.zxing.BarcodeFormat;import com.google.zxing.MultiFormatWriter;import com.google.zxing.WriterException;import com.google.zxing.client.j2se.MatrixToImageWriter;import com.google.zxing.common.BitMatrix;import javax.imageio.ImageIO;import java.io.ByteArrayOutputStream;import java.io.IOException;import java.util.Base64;public class GenerateQrCode {    //static function that creates QR Code    public static String generateQRcode(String data, int heightOfQR, int widthOfQR) throws WriterException, IOException {        String charset = "UTF-8";        //the BitMatrix class represents the 2D matrix of bits        //MultiFormatWriter is a factory class that finds the appropriate Writer subclass for the BarcodeFormat requested and encodes the barcode with the supplied contents.        BitMatrix matrix = new MultiFormatWriter().encode(new String(data.getBytes(charset), charset), BarcodeFormat.QR_CODE, widthOfQR, heightOfQR);        //System.out.print( MatrixToImageWriter.toBufferedImage(matrix));        //Converting BitMatrix to PNG        String imageString = null;        ByteArrayOutputStream bos = new ByteArrayOutputStream();        try {            ImageIO.write(MatrixToImageWriter.toBufferedImage(matrix), "png", bos);            byte[] imageBytes = bos.toByteArray();            //Convert PNG to Base64 String            Base64.Encoder encoder = Base64.getEncoder();            imageString = encoder.encodeToString(imageBytes);            bos.close();        } catch (IOException e) { e.printStackTrace(); }        //Return Base64 String to Calling Function        return imageString;    }}

2. Integration with Mulesoft Studio

Paste the Java code into the src/main/java directory of your Mulesoft Studio project, within the specified package.

3. Add Dependencies

Update your Mule’s POM file to include the necessary ZXing dependencies:

<dependency>    <groupId>com.google.zxing</groupId>    <artifactId>core</artifactId>    <version>3.3.0</version></dependency><dependency>    <groupId>com.google.zxing</groupId>    <artifactId>javase</artifactId>    <version>3.3.0</version></dependency>

4. Mule Flow Structure

  • Add a Transform Message Component.
  • Insert the following code into the component:
%dw 2.0output application/java---// Extract the value of the "data" query parameter from theattributes.queryParams.data as String default "Empty"

5. Transform Message Component

Insert a Transform Message component into your workflow. This component will manipulate the data. You can specify the name for the QR code generation or pass parameters directly. Here’s the sample code for the Transform Message component:

%dw 2.0// Import the GenerateQrCode class from the specified Java packageimport java!com::utils::GenerateQrCode// Import all the functions from the Binaries module in DataWeaveimport * from dw::core::Binaries// Set the output format as a PNG image with binary encodingoutput image/png with binary// Store the input payload in a variable named 'data'var data = payload// Define the height of the QR code image in pixelsvar heightOfQR = 300// Define the width of the QR code image in pixelsvar widthOfQR = 300---// Use the imported Java function to generate a QR code from the 'data' variable// The QR code is generated with the specified height and width// The result is then converted from a Base64 string to a binary formatfromBase64(GenerateQrCode::generateQRcode(data,heightOfQR,widthOfQR)) as Binary

The provided code specifies the size of the QR Scanner.

Run the project and access the ‘HTTP Listener’ endpoint. Scan the generated QR code.

]]>
Post a Comment (0)
Previous Post Next Post