Image in the center of the QR code

[ingeJulianLasso]

Hello, thank you very much for such an excellent library. I would like to ask if it is possible to add a custom image in the center of the QR code that is generated with the library.

I have observed that this library depends on another one called "qrcode" and I consulted a little bit, I could see that it is possible to insert an image in the center of the QR code that is generated.

https://stackoverflow.com/questions/53898890/how-to-generate-qr-code-together-with-the-image-in-a-center#answers-header

Can you tell me how to do this? Thank you very much for the help you can give me

[Mondei1]

Hey! I figured it out myself. I put the QR-Code into a div and then I put a absolute image over it. I just struggled with centering it (typical CSS :roll_eyes:) but since my QR-Code and icon is always 256px and 32px in height/width respectively, I calculated 96px as distance from top and left for the icon.

Code

CSS

.qr {
    width: 256px;
    height: 256px;
    border-radius: 8px;
    overflow: hidden;
}

/* Only this is relevant for the icon */
.qr > img {
    position: absolute;
    height: 64px;
    width: 64px;
    top: 96px;
    left: 96px;
    z-index: 2;
}

HTML

<div class="qr">
    <img src="assets/Bitcoin.svg">    <!-- Your icon -->
    <qrcode
        [qrdata]="'bitcoin:1QFrbboisCYgeBdowGAuCTK3r2YnZuApYd'"
        [width]="256"
        [errorCorrectionLevel]="'M'"
        [elementType]="'svg'"
        [margin]="1">
    </qrcode>
</div>

And this is how it looks (still scanable):

So no, there is not a "native" way with this library (yet) but it can be added very easily.

Hope this helps you!

[Cordobo]

Thanks for opening the issue @ingeJulianLasso and for posting your workaround @Mondei1

I'm closing this as duplicate in favor of #7

[mwawrusch]

Here is another library that has the feature natively - perhaps this can be used as a blueprint to add it this one: https://www.npmjs.com/package/qr-code-styling

Also, I am wondering if you might run into scanning errors - the error correction can only correct so much.

[Mondei1]

@mwawrusch I guess that a 64 x 64px image inside a 256 x 256px QR-Code is not going to corrupt any data. If you're using a smaller QR-Code and you don't adapt the icon size accordingly, you'll might run into problems. But in my case above the error correction is working great and the error correction algorithm should be deal with greater sizes. As you can see, I used error correction level M which can recover up to 15% of corrupted data and it seems to be enough.

[thevinaysomawat]

Can this Similar workaround be done for downloading QR code with logos functionality?

[Mondei1]

You can do this for any kind of QR-Code. As long as your correction level is set high enough. You'll need to try for yourself. If you can scan it, everyone can scan it. But do I get this correct? You want to show a download link with a QR-Code with a logo in the center? If yes, then yes you can.

[Cordobo]

angularx-qrcode now supports logos out of the box:

https://cordobo.github.io/angularx-qrcode/

[ttndiepoe]

angularx-qrcode now supports logos out of the box:

https://cordobo.github.io/angularx-qrcode/

Which version of angularx-qrcode are supporting embedding the image in the center? I'm using version 12.0.3 and it doesn't work