Generate a QR Code with a logo in the center

4 posts, 0 answers
  1. Hassan
    Hassan avatar
    154 posts
    Member since:
    Aug 2010

    Posted 16 Sep 2018 Link to this post

    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.

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2482 posts

    Posted 18 Sep 2018 Link to this post

    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.
  3. Hassan
    Hassan avatar
    154 posts
    Member since:
    Aug 2010

    Posted 17 Dec 2018 Link to this post

    Can you, please, help me get started with some sample code in this regard.
  4. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2482 posts

    Posted 19 Dec 2018 Link to this post

    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.
Back to Top