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!

Thistledown

You may want to refer to one of these questions: #13248201, #18297055 – Nonconformist

qrcode-monkey.com – Determinable

Possible duplicate of Is there a library to create Design QR codes with Java? – Personify

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

Larina

How does this guarantee that the image is small enough such that there is still enough error correction information for a reader to parse it? Your image doesn't scan whatsoever on my device, while the OP's example image does so easily. -1. – Physicality

How would the user be able to determine by how much to scale it? A real solution to this is aware of the exact error correction information in a QR code and how it is laid out, and uses that to determine a feasibly-scannable overlay size. – Physicality

I think, OP's requirement was to embed his logo, may be as a transparent overlay image, which doesn't affect the readability of QR code. the ratio to which the logo is scaled was not a specification to the question. And I just tried to help him with the method helped me earlier. Thanks for raising this concern, will surely update it with a perfect solution. – Scurrilous

Where is logo? I mean where we are giving logo image? – Barbecue

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

Falco

I import the library but don't found "EncodeHintType" "QRCodeWriter" and "ErrorCorrectionLevel" – Seventeen

Did you import the two libraries, zxing and QRGen? Because EncodeHintType, QRCodeWriter and ErrorCorrectionLevel belongs to zxing library. – Falco

Answer 3

You might also want to try out my library, which provides a lot of different qr code styles and convenient options to add a logo either as Image or Base64 String.

You can check it out here: https://github.com/SimonScholz/qr-code-with-logo or directly on maven cental: https://central.sonatype.com/artifact/io.github.simonscholz/qr-code-with-logo

Within the readme you find a lot of examples and the repository consists of examples for Java and Kotlin.

I even created a small Swing desktop application to create qr code, which can also generate code for you.

Currently I am also working on supporting SVG images.

Woad

Answer 4

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.

Electrodynamometer

Yes, if you set hashMapOf(EncodeHintType.ERROR_CORRECTION to ErrorCorrectionLevel.H), check out the "my full solution here" link for more information. – Electrodynamometer

Answer 5

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

Selia