How to generate QR code with logo inside it?

Question

I am developing the application for Android devices. I want to generate QR code with logo inside it.

With ZXing I know how to generate simple QR codes like this one:

But I want to generate QR code with logo inside it. So I want to get something like this:

Is there any way to do it? I have no idea how to do it. Could you help me please? May there is some ready library or example of how to do it.

Thank you!

Answer 1

You can add your logo it as an Image Overlay like

public BufferedImage getQRCodeWithOverlay(BufferedImage qrcode) 
{
    BufferedImage scaledOverlay = scaleOverlay(qrcode);

    Integer deltaHeight = qrcode.getHeight() - scaledOverlay.getHeight();
    Integer deltaWidth  = qrcode.getWidth()  - scaledOverlay.getWidth();

    BufferedImage combined = new BufferedImage(qrcode.getWidth(), qrcode.getHeight(), BufferedImage.TYPE_INT_ARGB);
    Graphics2D g2 = (Graphics2D)combined.getGraphics();
    g2.drawImage(qrcode, 0, 0, null);
    g2.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER, overlayTransparency));
    g2.drawImage(scaledOverlay, Math.round(deltaWidth/2), Math.round(deltaHeight/2), null);
    return combined;
}

private BufferedImage scaleOverlay(BufferedImage qrcode)
{
    Integer scaledWidth = Math.round(qrcode.getWidth() * overlayToQRCodeRatio);
    Integer scaledHeight = Math.round(qrcode.getHeight() * overlayToQRCodeRatio);

    BufferedImage imageBuff = new BufferedImage(scaledWidth, scaledHeight, BufferedImage.TYPE_INT_ARGB);
    Graphics g = imageBuff.createGraphics();
    g.drawImage(overlay.getScaledInstance(scaledWidth, scaledHeight, BufferedImage.SCALE_SMOOTH), 0, 0, new Color(0,0,0), null);
    g.dispose();
    return imageBuff;
}

Please refer this post & github for more info

Answer 2

In Kotlin with zxing library and overlay from assets folder.

• The correction needs to be made because the overlay will hide some part of the QR Code;

• Class MatrixToImageWriter is from: https://github.com/kenglxn/QRGen

  private fun generateQrCodeWithOverlay(qrCodeData: String): Bitmap? {
  
     val hints = HashMap<EncodeHintType?, Any?>()
     // The Error Correction level H provide a QR Code that can be covered by 30%
     hints[EncodeHintType.ERROR_CORRECTION] = ErrorCorrectionLevel.H
  
     val writer = QRCodeWriter()
  
     return try {
         // Create a QR Code from qrCodeData and 512 by 512 pixels, same size as my Logo
         val encodedQrCode = writer.encode(qrCodeData, BarcodeFormat.QR_CODE, 512, 512, hints)
  
         var qrCodeBitmap: Bitmap = MatrixToImageWriter.toBitmap(encodedQrCode)
  
         val qrCodeCanvas = Canvas(qrCodeBitmap)
  
         // Used to resize the image
         val scaleFactor = 4
  
         val logo =
           BitmapFactory.decodeStream(app.assets.open("path/to/your/logo.png"))
  
         // Resizing the logo increasing the density to keep it sharp
         logo.density = logo.density * scaleFactor
  
         val xLogo = (512 - logo.width / scaleFactor) / 2f
         val yLogo = (512 - logo.height / scaleFactor) / 2f
  
         qrCodeCanvas.drawBitmap(logo, xLogo, yLogo, null)
  
         qrCodeBitmap
     } catch (e: Exception) {
         // handle errors
         null
     }
  }
  

Answer 3

I created the following Kotlin Extention, which adds a Bitmap to the centre of another Bitmap:

fun Bitmap.addOverlayToCenter(overlayBitmap: Bitmap): Bitmap {

    val bitmap2Width = overlayBitmap.width
    val bitmap2Height = overlayBitmap.height
    val marginLeft = (this.width * 0.5 - bitmap2Width * 0.5).toFloat()
    val marginTop = (this.height * 0.5 - bitmap2Height * 0.5).toFloat()
    val canvas = Canvas(this)
    canvas.drawBitmap(this, Matrix(), null)
    canvas.drawBitmap(overlayBitmap, marginLeft, marginTop, null)
    return this
}

Can find my full solution here.

Answer 4

There is plenty online QR code generator, such as https://app.aotol.com/qr/api

You can just reference the QR image url to it such as

<img src="https://app.aotol.com/qr/api?qr_content=https://wwww.google.com&qr_logo=https://blog.hubspot.com/hubfs/image8-2.jpg">