Feature: download the generated stat

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"

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 (
         <div className="flex justify-center flex-col items-center">
 
             {/* Stats */}
-            {loading ? (<Skeleton />) : (<div className="rounded-lg w-[95%] sm:w-[65%] md:w-[50%] lg:w-[35%] xl:w-[30%]  h-[270px] bg-[#292829] mb-5">
-
+            {loading ? (<Skeleton />) : (<div className="download rounded-lg w-[95%] sm:w-[65%] md:w-[50%] lg:w-[35%] xl:w-[30%]  h-[270px] bg-[#292829] mb-5" >
                 <div className="flex items-center justify-around ">
                     <Profile userData={userData.profileData} />
                     <About result={userData.aboutData} />
@@ -205,7 +219,6 @@ export default function StatsGenerator({ setShowStats }) {
                     </div>
                 </div>
 
-
             </div >)
             }
 
@@ -220,6 +233,7 @@ export default function StatsGenerator({ setShowStats }) {
             <div className="flex gap-3 mt-3">
                 <button onClick={handleSubmit} className={`${userName.trim() === '' ? 'pointer-events-none opacity-50' : ''} rounded-md bg-[#0e0e0e] text-white hover:bg-[#292829] border  border-gray-600 px-4 py-2 text-base font-bold shadow`}>Generate Stats</button>
                 <button onClick={addData} className={`${userName.trim() === '' ? 'pointer-events-none opacity-50' : ''} rounded-md bg-[#0e0e0e] text-white hover:bg-[#292829] border  border-gray-600 px-4 py-2 text-base font-bold shadow`}>Add To HallOfFame</button>
+                <button onClick={downloadAsImage} disabled={loading}><iconify-icon icon="flat-color-icons:download" style={{ color: 'white', marginRight: '5px' }} width="17" height="19"></iconify-icon></button>
             </div>
             <button onClick={() => setShowStats(false)} className="mt-2">
                 <iconify-icon icon="line-md:close-small" width="60" height="60"></iconify-icon>

server/index.js

@@ -7,7 +7,9 @@ const cors = require('cors'); // Import the cors package
 const app = express();
 const port = 8000;
 // Use the cors middleware
-app.use(cors());
+app.use(cors({
+    origin: 'https://leetcode-profiles.vercel.app', // Replace with your frontend's domain
+}));
 
 app.get('/:username', async (req, res) => {
     try {
@@ -24,7 +26,12 @@ app.get('/:username', async (req, res) => {
 
         //Profile Data
         const fullName = $('div.text-label-1.break-all.text-base.font-semibold').first().text().trim();
+
         const image = $('div.relative.flex.h-20.w-20.shrink-0 img').attr('src');
+        const imageUrl = $('div.relative.flex.h-20.w-20.shrink-0 img').attr('src');
+        const imageResponse = await axios.get(imageUrl, { responseType: 'arraybuffer' });
+        const imageBuffer = Buffer.from(imageResponse.data, 'binary').toString('base64');
+
         const badgeImg = $('div.ml-1 img').attr('src');
         const rank = $('span.ttext-label-1.font-medium').text();
 
@@ -81,7 +88,7 @@ app.get('/:username', async (req, res) => {
             username,
             badgeImg: badgeImg ? `${badgeImg}` : undefined,
             rank,
-            image: image ? image : undefined,
+            image: `data:image/jpeg;base64,${imageBuffer}`,
         };
 
         const totalQuestions = parseInt(easyTotal) + parseInt(mediumTotal) + parseInt(hardTotal);