Image in QRCode

[aSamu3l]

How can I insert an image in the center of the QR-Code?

[codemasher]

Hey, the basic idea is to just append an <image> node to the SVG output, see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image

[aSamu3l]

I downloaded the svg example, but the image is not in the center of the qr-code and the only thing I see is the qrcode with all the colors. I'm trying to understand what I have to do and I'm not very good at javascript and I can't understand exactly how I have to do it. The only thing I know is how javascript works in html but otherwise I know next to nothing.

[codemasher]

And you're asking me to do this work for you. I know that's not the answer you're expecting, but this is not StackOverflow. I gave you the hints, but you'll have to figure out for yourself, which in turn increases your Javascript knowledge.

[aSamu3l]

I'm not asking you to do this to me. I'm trying to figure out where I should put the image. I also looked for various examples or something similar. But the documentation is not the best and there are values written that do not correspond even with one of the 2 example codes.
I would like to understand if I have to pass the image in base64 or in some other type and if so in which constructor field should I pass the image

[codemasher]

You'll add the image after rendering - it has nothing to do with the QRcode at all.

// set options
let options = new qrc.QROptions({
	outputInterface   : qrc.QRMarkupSVG,
	returnAsDomElement: true,
	// ... more options ...
});

// render qrcode
let qrcodeElement = (new qrc.QRCode(options)).render(data); // returns a SVG DOM element


// modify the SVG element (nothing of the following has to do anything with the qrcode library)

// create a container to move and scale the logo
let g = document.createElement('g');

// the hard part: math! aka, calculate the proportions of the logo 
// and its position with respect to the supposed output
g.transform = 'translate(16.875 16.875) scale(0.25)'; // values exemplary

// create the logo
let image = document.createElement('image'); 
image.href = './path/to/image.png'; // can be anything, recommended is base64 data URI

// append image to transform container
g.appendChild(image);
// append transform to SGV element
qrcodeElement.appendChild(g);
// append SVG to body (or whatever container is supposed to hold it)
document.body.appendChild(qrcodeElement);

For the transform attribute see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform

[aSamu3l]

Oh, sorry. I thought the image was inserted directly into the qr-code, in fact I wasn't understanding how it worked

[codemasher]

That's what i said in my first reply.