Help with npm 'qrcode-with-logos'

Ask the community
1

Hi team. Anyone can help with the implementation of the npm package ‘qrcode-with-logos’?

This is the example I found in the documentation (qrcode-with-logos - npm):


import QrCodeWithLogo from “qrcode-with-logos”;

let qrcode = new QrCodeWithLogo({
canvas: document.getElementById(“canvas”),
content: “zxpsuper (suporka) · GitHub”,
width: 380,
// download: true,
image: document.getElementById(“image”),
logo: {
src: “https://avatars1.githubusercontent.com/u/28730619?s=460&v=4”
}
});

I’m trying to implement it to overlaid a logo in a QR code but I’m not sure how to create the document elements ‘canvas’ and ‘image’ in Wix. I have tested different approaches but it did not work.

Any idea will be very appreciated!

2

It’s not possible to access document from Velo because Wix uses a virtual DOM. To use this specific library without modification you’ll need to put it in a Custom Element and also adjust the import to be a tag that retrieves the library from a CDN.

There may also be other libraries that do this kind of functionality but don’t require DOM access.

3

Going to add this one here - it’s an example of creating a QR code in Wix using the ‘qrcode’ NPM - https://www.wix.com/velo/example/qr-code-generator

Although the example doesn’t demonstrate adding a logo, it might give you some idea of directions that can be taken.

Good luck!

1 Like
4

Thanks @anthony, I got it!

1 Like