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 }) {
+