Open giriannamalai opened 2 years ago
We need this feature to. Is there any way to place an image in a QR?
This would be an amazing addition . Only one library does this as far as I can tell ... https://github.com/SumiMakito/Awesome-qr.js ... but it has a ton of unaddressed issues.
We need this feature to. Is there any way to place an image in a QR?
@giriannamalai @thereisnobugs, I was just working on this. Little late but hopefully it helps someone.
I've uploaded my generator to codepen for reference.
const QRCode = require('qrcode-svg');
const qrcode = new QRCode({
content: "Your content here",
padding: 0,
width: 160,
height: 160,
color: #000000,
background: #ffffff,
ecl: M,
join: true,
pretty: true,
swap: false,
xmlDeclaration: true
});
<g>
element that contains our logo's SVG paths.const svgString = qrcode.svg();
const parser = new DOMParser();
const svgDoc = parser.parseFromString(svgString, "image/svg+xml");
const parsedSvgElement = svgDoc.documentElement;
// Example function to scale paths (implementation depends on your logo's SVG)
function scalePathData(paths, originalSize, newSize) {
const scaleFactor = newSize / originalSize;
return paths.map(pathInfo => {
const { d, fill } = pathInfo;
const scaledD = d.replace(/([0-9.]+)/g, (match) => {
return (parseFloat(match) * scaleFactor).toFixed(3);
});
return { d: scaledD, fill };
});
}
// Assuming your paths and the scaling function are defined
const scaledPaths = scalePathData(paths, originalSize, Math.min(width, height));
// Create and append the <g> element with scaled paths
const gElement = document.createElementNS("http://www.w3.org/2000/svg", "g");
scaledPaths.forEach(pathInfo => {
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute("d", pathInfo.d);
path.setAttribute("fill", pathInfo.fill);
gElement.appendChild(path);
});
parsedSvgElement.appendChild(gElement);
document.getElementById('qrcode').innerHTML = new XMLSerializer().serializeToString(parsedSvgElement);
This method allows for a high degree of customization while keeping the QR code functional. It's crucial to carefully choose the size and position of your logo to maintain the QR code's scannability. Through testing, I confirmed the QR codes generated using this method are reliably scannable across various devices.
SVG
PNG
[!NOTE] ChatGTP helped me write this markdown. Refer to the codpen if anything is confusing.
It is a feature request.