import React, { useState } from "react"; import html2canvas from "html2canvas"; const QRCodeWithBackground = ({ isConfigure, qrCodeUrl, backgroundUrl, initialQrPosition, initialQrSize, setInitialPos, setInitialSize, onBackgroundUrlChange, }) => { const [qrPosition, setQrPosition] = useState(initialQrPosition); const [qrSize, setQrSize] = useState(initialQrSize); const [bgImage, setBgImage] = useState(backgroundUrl); const handlePositionChange = (e) => { const { name, value } = e.target; setQrPosition((prevPosition) => ({ ...prevPosition, [name]: value, })); }; const handleSizeChange = (e) => { setQrSize(e.target.value); }; const handleFileChange = (e) => { const file = e.target.files[0]; if (file) { const newBgImage = URL.createObjectURL(file); setBgImage(newBgImage); onBackgroundUrlChange(newBgImage); } }; const handleSave = () => { setInitialPos(qrPosition); setInitialSize(qrSize); onBackgroundUrlChange(bgImage); }; const printQRCode = () => { const element = document.getElementById("qr-code-container"); if (element) { html2canvas(element, { useCORS: true, backgroundColor: null, }) .then((canvas) => { const img = canvas.toDataURL("image/png"); const printWindow = window.open("", "", "height=600,width=800"); printWindow.document.write( "Print QR Code" ); printWindow.document.write( '' ); printWindow.document.write(""); printWindow.document.close(); printWindow.focus(); printWindow.print(); }) .catch((err) => { console.error("Error capturing image:", err); }); } else { console.error("Element not found for printing."); } }; return (
QR Code
{isConfigure ? (
) : ( )}
); }; // Styles for the configuration labels and inputs const styles = { label: { display: "block", fontSize: "16px", fontWeight: "bold", marginBottom: "5px", }, sliderContainer: { marginBottom: "20px", }, sliderWrapper: { display: "flex", alignItems: "center", gap: "10px", marginTop: "5px", }, input: { flex: "1", margin: "0 10px", }, value: { fontSize: "16px", minWidth: "50px", textAlign: "right", }, labelStart: { fontSize: "14px", }, labelEnd: { fontSize: "14px", }, fileInput: { marginLeft: "10px", }, }; export default QRCodeWithBackground;