This is a migrated thread and some comments may be shown as answers.

Generate a QR Code with a logo in the center

5 Answers 902 Views
QRCode
This is a migrated thread and some comments may be shown as answers.
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
DoomerDGR8 asked on 16 Sep 2018, 06:54 AM

Hi!

I need to know if there is a way to generate a QR code with a logo in the center as shown in the attached file.

5 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 18 Sep 2018, 11:34 AM
Hi,

I am afraid that such feature is not available out of the box for the QRCode widget. In order to implement similar behavior you could get the position of the generated QR code using JavaScript and calculate where the logo should be located. Then place the image over the barcode manually. 

With that said, if you would like to request the feature to be available out of the box I would suggest submitting a request in our UserVoice portal. Based on the demand it gathers in the community it can be included in the planning for implementation.

Regards,
Viktor Tachev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
answered on 18 Dec 2018, 05:55 AM
Can you, please, help me get started with some sample code in this regard.
0
Viktor Tachev
Telerik team
answered on 19 Dec 2018, 01:48 PM
Hello,

Since this functionality is not built-in for the QRCode widget you would need custom implementation to show a logo with the code. One approach you could try is to generate a normal QR code. Then calculate where is the center of the QR code and place the logo over it using CSS or JavaScript. Note that this will hide part of the QR code so it should have high enough error correction.


Regards,
Viktor Tachev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Ivane
Top achievements
Rank 1
Iron
answered on 12 Sep 2023, 03:13 AM
You can try a QR code generator with logo. I created a QR code through it with a logo in the center. It's easy to create
0
Viktor Tachev
Telerik team
answered on 13 Sep 2023, 10:28 AM

Hello,

The option for adding a custom image to the QR Code component was introduced in R2 2021 version of the components. You can specify an image that will be shown over the QR via the Overlay option. Check out the demo below that illustrates the functionality:

https://demos.telerik.com/aspnet-mvc/qrcode/image


Regards,
Viktor Tachev
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages. If you're new to the Telerik family, be sure to check out our getting started resources, as well as the only REPL playground for creating, saving, running, and sharing server-side code.

Tags
QRCode
Asked by
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Viktor Tachev
Telerik team
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
Ivane
Top achievements
Rank 1
Iron
Share this question
or