tknuth/QR-master
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Barcode fix

Browse Source
This commit is contained in:
Timo Knuth
2026-04-17 23:24:22 +02:00
parent 5894f4619d
commit aa2628834b
2 changed files with 114 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/dashboard/QRCodeCard.tsx
View File

@@ -8,6 +8,41 @@ import { Badge } from '@/components/ui/Badge';
import { Dropdown, DropdownItem } from '@/components/ui/Dropdown';
import { formatDate } from '@/lib/utils';
function addBarcodeCaptionToSvg(svgElement: SVGElement, caption: string): string {
const cloned = svgElement.cloneNode(true) as SVGElement;
const NS = 'http://www.w3.org/2000/svg';
const widthAttr = cloned.getAttribute('width');
const heightAttr = cloned.getAttribute('height');
const width = widthAttr ? parseFloat(widthAttr) : 200;
const height = heightAttr ? parseFloat(heightAttr) : 100;
const extraHeight = 18;
cloned.setAttribute('height', String(height + extraHeight));
const viewBox = cloned.getAttribute('viewBox');
if (viewBox) {
const parts = viewBox.split(/\s+/);
if (parts.length === 4) {
cloned.setAttribute(
'viewBox',
`${parts[0]} ${parts[1]} ${parts[2]} ${parseFloat(parts[3]) + extraHeight}`
);
}
}
const text = document.createElementNS(NS, 'text');
text.setAttribute('x', String(width / 2));
text.setAttribute('y', String(height + 12));
text.setAttribute('text-anchor', 'middle');
text.setAttribute('font-size', '9');
text.setAttribute('font-family', 'Arial, Helvetica, sans-serif');
text.setAttribute('fill', '#666666');
text.textContent = caption;
cloned.appendChild(text);
return new XMLSerializer().serializeToString(cloned);
}
interface QRCodeCardProps {
qr: {
id: string;
@@ -113,7 +148,9 @@ END:VCARD`;
const svgContainer = document.querySelector(`#qr-svg-${qr.id}`);
const svg = svgContainer?.querySelector('svg');
if (svg) {
let svgData = new XMLSerializer().serializeToString(svg);
let svgData = qr.contentType === 'BARCODE'
? addBarcodeCaptionToSvg(svg as SVGElement, 'Scan: iPhone -> Barcode Scanner App | Android -> Google Lens')
: new XMLSerializer().serializeToString(svg);
if (qr.style?.cornerStyle === 'rounded') {
const width = svg.getAttribute('width') || '96';
@@ -210,17 +247,23 @@ END:VCARD`;
)}
<div id={`qr-svg-${qr.id}`} className={qr.style?.cornerStyle === 'rounded' ? 'rounded-lg overflow-hidden' : ''}>
{qr.contentType === 'BARCODE' ? (
<Barcode
key={`${qr.id}-${qr.type === 'STATIC' ? qr.content?.value : qrUrl}-${qr.content?.format}`}
value={qr.type === 'STATIC' ? (qr.content?.value || '123456789') : qrUrl}
format={(qr.content?.format as any) || 'CODE128'}
lineColor={qr.style?.foregroundColor || '#000000'}
background={qr.style?.backgroundColor || '#FFFFFF'}
width={1.5}
height={60}
displayValue={true}
fontSize={10}
/>
<div className="w-full max-w-[240px] [&_svg]:!w-full [&_svg]:!h-auto [&_svg]:!max-w-full">
<Barcode
key={`${qr.id}-${qr.type === 'STATIC' ? qr.content?.value : qrUrl}-${qr.content?.format}`}
value={qr.type === 'STATIC' ? (qr.content?.value || '123456789') : qrUrl}
format={(qr.content?.format as any) || 'CODE128'}
lineColor={qr.style?.foregroundColor || '#000000'}
background={qr.style?.backgroundColor || '#FFFFFF'}
width={2}
height={70}
margin={8}
displayValue={true}
fontSize={11}
/>
<p className="mt-1 text-center text-[9px] leading-tight text-gray-600 px-1">
Scan: iPhone → Barcode Scanner App · Android → Google Lens
</p>
</div>
) : (
<QRCodeSVG
value={qrUrl}