From e2e6170f526860d589123201cd227e72bb8f941e Mon Sep 17 00:00:00 2001 From: Michael Mainguy Date: Fri, 1 Aug 2025 17:31:09 -0500 Subject: [PATCH] Fix SVG centering issue in standalone bundle - Fixed image and white box positioning in SVG QR codes - Updated coordinate calculations to account for QR code margin - Changed from centering in entire 33x33 area to centering in QR data area (29x29) - Reduced margin around image from 2 to 1 units for better proportions - Added test file to verify centering fix - Rebuilt standalone bundle with fix --- src/utils/qrCodeUtils.js | 16 ++- test-centering.html | 204 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 215 insertions(+), 5 deletions(-) create mode 100644 test-centering.html diff --git a/src/utils/qrCodeUtils.js b/src/utils/qrCodeUtils.js index e825b25..a974112 100644 --- a/src/utils/qrCodeUtils.js +++ b/src/utils/qrCodeUtils.js @@ -198,13 +198,19 @@ export const addImageToSVG = async (svgString, imageUrl, imageSize = 20) => { const svgElement = svgDoc.documentElement // Calculate image size and position with precise decimal coordinates - // The QR code uses a 33x33 coordinate system, so we need to scale accordingly + // The QR code uses a 33x33 coordinate system with a 2-unit margin const qrSize = 33 // QR code coordinate system size - const calculatedImageSize = qrSize * (imageSize / 100) - const margin = 2 // Smaller margin for the 33x33 coordinate system + const qrMargin = 2 // Margin in the QR coordinate system + const qrDataSize = qrSize - (qrMargin * 2) // Actual QR data area (29x29) + + // Calculate image size relative to the QR data area + const calculatedImageSize = qrDataSize * (imageSize / 100) + const margin = 1 // Small margin around the image in QR coordinates const boxSize = calculatedImageSize + (margin * 2) - const boxX = (qrSize - boxSize) / 2 - const boxY = (qrSize - boxSize) / 2 + + // Center the box in the QR data area (not the entire 33x33) + const boxX = qrMargin + (qrDataSize - boxSize) / 2 + const boxY = qrMargin + (qrDataSize - boxSize) / 2 const imageX = boxX + margin const imageY = boxY + margin diff --git a/test-centering.html b/test-centering.html new file mode 100644 index 0000000..0a27cb4 --- /dev/null +++ b/test-centering.html @@ -0,0 +1,204 @@ + + + + + + QR Code Centering Test + + + +

QR Code Centering Test

+ +
+

Test 1: Basic QR Code with Custom Image

+
+ This test generates a QR code with a custom image to verify centering. +
+ + +
+
+ +
+

Test 2: Different Image Sizes

+
+ Test different image sizes to ensure centering works at all sizes. +
+ + + +
+
+ +
+

Test 3: Custom Colors

+
+ Test with different colors to ensure visibility. +
+ +
+
+ + + + + + + \ No newline at end of file