working on qr

src/components/QR.js

@@ -1,8 +1,9 @@
-import React, { useState } from "react";
+import React, { useState, useRef } from "react";
 import html2canvas from "html2canvas";
 
 const QRCodeWithBackground = ({
   isConfigure,
+  tableNo,
   qrCodeUrl,
   backgroundUrl,
   initialQrPosition,
@@ -14,6 +15,8 @@ const QRCodeWithBackground = ({
   const [qrPosition, setQrPosition] = useState(initialQrPosition);
   const [qrSize, setQrSize] = useState(initialQrSize);
   const [bgImage, setBgImage] = useState(backgroundUrl);
+  const fileInputRef = useRef(null);
+  const overlayTextRef = useRef(null);
 
   const handlePositionChange = (e) => {
     const { name, value } = e.target;
@@ -45,6 +48,10 @@ const QRCodeWithBackground = ({
   const printQRCode = () => {
     const element = document.getElementById("qr-code-container");
     if (element) {
+      // Hide overlay text
+      const overlayText = overlayTextRef.current;
+      if (overlayText) overlayText.style.display = "none";
+
       html2canvas(element, {
         useCORS: true,
         backgroundColor: null,
@@ -65,12 +72,49 @@ const QRCodeWithBackground = ({
         })
         .catch((err) => {
           console.error("Error capturing image:", err);
+        })
+        .finally(() => {
+          // Show overlay text again
+          if (overlayText) overlayText.style.display = "flex";
         });
     } else {
       console.error("Element not found for printing.");
     }
   };
 
+  const saveImage = () => {
+    const element = document.getElementById("qr-code-container");
+    if (element) {
+      // Hide overlay text
+      const overlayText = overlayTextRef.current;
+      if (overlayText) overlayText.style.display = "none";
+
+      html2canvas(element, {
+        useCORS: true,
+        backgroundColor: null,
+      })
+        .then((canvas) => {
+          canvas.toBlob((blob) => {
+            const link = document.createElement("a");
+            link.href = URL.createObjectURL(blob);
+            link.download = `table ${tableNo}_QRCode.png`;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+          });
+        })
+        .catch((err) => {
+          console.error("Error capturing image:", err);
+        })
+        .finally(() => {
+          // Show overlay text again
+          if (overlayText) overlayText.style.display = "flex";
+        });
+    } else {
+      console.error("Element not found for saving.");
+    }
+  };
+
   return (
     <div>
       <div
@@ -97,6 +141,22 @@ const QRCodeWithBackground = ({
             transform: "translate(-50%, -50%)",
           }}
         />
+        {/* Overlay text that triggers file input */}
+        <div
+          ref={overlayTextRef}
+          style={styles.overlayText}
+          onClick={() => fileInputRef.current.click()}
+        >
+          Click To Change Image
+        </div>
+        {/* Hidden file input */}
+        <input
+          type="file"
+          accept="image/*"
+          ref={fileInputRef}
+          style={{ display: "none" }}
+          onChange={handleFileChange}
+        />
       </div>
       {isConfigure ? (
         <div style={{ marginTop: "20px" }}>
@@ -159,17 +219,6 @@ const QRCodeWithBackground = ({
               </div>
             </label>
           </div>
-          <div style={{ marginTop: "20px" }}>
-            <label style={styles.label}>
-              Background Image Upload:
-              <input
-                type="file"
-                accept="image/*"
-                onChange={handleFileChange}
-                style={styles.fileInput}
-              />
-            </label>
-          </div>
           <div style={{ marginTop: "20px" }}>
             <button
               onClick={handleSave}
@@ -195,28 +244,53 @@ const QRCodeWithBackground = ({
           </div>
         </div>
       ) : (
-        <button
-          onClick={printQRCode}
-          style={{
-            marginTop: "10px",
-            padding: "10px 20px",
-            fontSize: "16px",
-            backgroundColor: "#007bff",
-            color: "#fff",
-            border: "none",
-            borderRadius: "4px",
-            cursor: "pointer",
-            transition: "background-color 0.3s",
-          }}
-          onMouseOver={(e) =>
-            (e.currentTarget.style.backgroundColor = "#0056b3")
-          }
-          onMouseOut={(e) =>
-            (e.currentTarget.style.backgroundColor = "#007bff")
-          }
-        >
-          Print QR Code
-        </button>
+        <div>
+          <button
+            onClick={printQRCode}
+            style={{
+              marginTop: "10px",
+              padding: "10px 20px",
+              fontSize: "16px",
+              backgroundColor: "#007bff",
+              color: "#fff",
+              border: "none",
+              borderRadius: "4px",
+              cursor: "pointer",
+              transition: "background-color 0.3s",
+            }}
+            onMouseOver={(e) =>
+              (e.currentTarget.style.backgroundColor = "#0056b3")
+            }
+            onMouseOut={(e) =>
+              (e.currentTarget.style.backgroundColor = "#007bff")
+            }
+          >
+            Print QR Code
+          </button>
+          <button
+            onClick={saveImage}
+            style={{
+              marginTop: "10px",
+              padding: "10px 20px",
+              fontSize: "16px",
+              backgroundColor: "#17a2b8",
+              color: "#fff",
+              border: "none",
+              borderRadius: "4px",
+              cursor: "pointer",
+              transition: "background-color 0.3s",
+              marginLeft: "10px",
+            }}
+            onMouseOver={(e) =>
+              (e.currentTarget.style.backgroundColor = "#138496")
+            }
+            onMouseOut={(e) =>
+              (e.currentTarget.style.backgroundColor = "#17a2b8")
+            }
+          >
+            Save Image
+          </button>
+        </div>
       )}
     </div>
   );
@@ -257,6 +331,20 @@ const styles = {
   fileInput: {
     marginLeft: "10px",
   },
+  overlayText: {
+    position: "absolute",
+    fontSize: "70px",
+    backgroundColor: "rgba(0, 0, 0, 0.7)",
+    top: "0",
+    bottom: "0",
+    color: "white",
+    width: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "pointer", // Indicates it's clickable
+    zIndex: 10, // Ensure it appears above other elements
+  },
 };
 
 export default QRCodeWithBackground;