diff --git a/client/package-lock.json b/client/package-lock.json index d20f99b..d8f6022 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -11,6 +11,7 @@ "axios": "^1.6.2", "dotenv": "^16.3.1", "firebase": "^10.6.0", + "html-to-image": "^1.11.11", "react": "^18.2.0", "react-dom": "^18.2.0", "react-toastify": "^9.1.3" @@ -3401,6 +3402,11 @@ "node": ">= 0.4" } }, + "node_modules/html-to-image": { + "version": "1.11.11", + "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.11.tgz", + "integrity": "sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA==" + }, "node_modules/http-parser-js": { "version": "0.5.8", "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.8.tgz", diff --git a/client/package.json b/client/package.json index dab0189..a8aa64c 100644 --- a/client/package.json +++ b/client/package.json @@ -13,6 +13,7 @@ "axios": "^1.6.2", "dotenv": "^16.3.1", "firebase": "^10.6.0", + "html-to-image": "^1.11.11", "react": "^18.2.0", "react-dom": "^18.2.0", "react-toastify": "^9.1.3" diff --git a/client/src/components/StatsGenerator.jsx b/client/src/components/StatsGenerator.jsx index 10f1172..26e9a58 100644 --- a/client/src/components/StatsGenerator.jsx +++ b/client/src/components/StatsGenerator.jsx @@ -9,9 +9,9 @@ import { firestore } from "../firebase"; import Skeleton from "./Skeleton"; import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; +import * as htmlToImage from 'html-to-image'; export default function StatsGenerator({ setShowStats }) { - const [userName, setUserName] = useState(''); const [loading, setLoading] = useState(false); @@ -162,12 +162,26 @@ export default function StatsGenerator({ setShowStats }) { }); } + const downloadAsImage = async () => { + const element = document.querySelector('.download'); + + try { + const imageUrl = await htmlToImage.toPng(element); + const a = document.createElement('a'); + a.href = imageUrl; + a.download = 'downloaded_image.png'; // Set the file name + a.click(); + console.log('Image downloaded successfully'); + } catch (error) { + console.error('Error converting div to image:', error); + } + }; + return (
{/* Stats */} - {loading ? () : (
- + {loading ? () : (
@@ -205,7 +219,6 @@ export default function StatsGenerator({ setShowStats }) {
-
) } @@ -220,6 +233,7 @@ export default function StatsGenerator({ setShowStats }) {
+