From e6013ebcbf19d5d002a139e735086e95aa78e9cd Mon Sep 17 00:00:00 2001
From: Dobromir Popov <dobromir.popov@gateway.one>
Date: Sat, 1 Feb 2025 13:47:16 +0200
Subject: [PATCH] copy to word combined

---
 QRCode.html | 41 ++++++++++++++++++++++++++++++++++++-----
 1 file changed, 36 insertions(+), 5 deletions(-)

diff --git a/QRCode.html b/QRCode.html
index 754344e..5e3addb 100644
--- a/QRCode.html
+++ b/QRCode.html
@@ -109,6 +109,11 @@
             opacity: 1;
         }
 
+        /* Hidden canvas for combining QR and label */
+        #combinedCanvas {
+            display: none;
+        }
+
         @media (max-width: 600px) {
             body {
                 padding: 10px;
@@ -142,6 +147,9 @@
             <div id="qrcode"></div>
             <div id="qrLabel"></div>
         </div>
+        
+        <!-- Hidden canvas for combining QR and label -->
+        <canvas id="combinedCanvas"></canvas>
     </div>
 
     <script>
@@ -180,14 +188,37 @@
         async function copyQRToClipboard() {
             try {
                 const qrImage = document.querySelector('#qrcode img');
+                const label = document.getElementById('qrLabel').textContent;
                 if (!qrImage) return;
 
-                // Create a canvas and draw the QR code on it
-                const canvas = document.createElement('canvas');
+                // Create a canvas for the combined image
+                const canvas = document.getElementById('combinedCanvas');
                 const ctx = canvas.getContext('2d');
-                canvas.width = qrImage.width;
-                canvas.height = qrImage.height;
-                ctx.drawImage(qrImage, 0, 0);
+
+                // Set canvas size to accommodate both QR code and label
+                const padding = 20;
+                const fontSize = 16;
+                ctx.font = `bold ${fontSize}px Arial`;
+                const labelMetrics = ctx.measureText(label);
+                
+                canvas.width = Math.max(qrImage.width, labelMetrics.width);
+                canvas.height = qrImage.height + (label ? fontSize + padding : 0);
+
+                // Fill with white background
+                ctx.fillStyle = '#ffffff';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+                // Draw QR code
+                const qrX = (canvas.width - qrImage.width) / 2;
+                ctx.drawImage(qrImage, qrX, 0);
+
+                // Draw label if it exists
+                if (label) {
+                    ctx.fillStyle = '#000000';
+                    ctx.font = `bold ${fontSize}px Arial`;
+                    ctx.textAlign = 'center';
+                    ctx.fillText(label, canvas.width / 2, qrImage.height + fontSize);
+                }
 
                 // Convert canvas to blob
                 const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/png'));