javascript - React js add logo in qrcode - Stack Overflow

I would like to be able to create a qrcode with a custom logo, as seen in the image.

I currently use the following library in react js: qrcode.react to create the qr code, but does not allow you to insert a logo.

I thought of writing a module to be able to do it, but I wanted some suggestions about it, as far as I can remember the internal codes, that is those where I should put the logo are correction codes.

I also found the following site that allows you to customize your qr code, according to you what technique they use, link: Site

I would like to be able to create a qrcode with a custom logo, as seen in the image.

I currently use the following library in react js: qrcode.react to create the qr code, but does not allow you to insert a logo.

I thought of writing a module to be able to do it, but I wanted some suggestions about it, as far as I can remember the internal codes, that is those where I should put the logo are correction codes.

I also found the following site that allows you to customize your qr code, according to you what technique they use, link: Site

• javascript
• reactjs
• qr-code

Share Improve this question Follow asked Sep 27, 2019 at 17:06 PaulPaul 4,5121515 gold badges6969 silver badges156156 bronze badges 1

• Hi Paul Have you able to acplished the above QR Code? I'm looking for similar QR Code – Herman Commented Apr 22, 2021 at 6:20

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Reading qrcode.react documentation, I saw imageSetings prop, this is alow you to insert any image you want as logo. Try it, this work for me:

<QRCode
  value="http://facebook.github.io/react/"
  fgColor="#7f0000"
  includeMargin
  imageSettings={{
    src:"https://picsum.photos/id/67/300/300",
    excavate:true
  }}
/>