Feat: added export as image btn

package.json

@@ -15,6 +15,7 @@
     "@emotion/styled": "^11.14.0",
     "@mui/icons-material": "^6.3.1",
     "@mui/material": "^6.3.1",
+    "html2canvas": "^1.4.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "zustand": "^5.0.3"

src/App.tsx

@@ -1,5 +1,6 @@
 import { DndContext, DragEndEvent } from '@dnd-kit/core';
 import { GitHub } from '@mui/icons-material';
+import html2canvas from 'html2canvas';
 import { useRef } from 'react';
 import { useShallow } from 'zustand/shallow';
 import './App.scss';
@@ -15,6 +16,8 @@ const App = () => {
     useShallow(state => [state.images, state.addTierImage, state.tierLevels, state.editTierImage]),
   );
 
+  const tierListRef = useRef<HTMLDivElement>(null);
+
   const uploadBtn = useRef<HTMLInputElement>(null);
 
   const clickUpload = () => {
@@ -35,13 +38,32 @@ const App = () => {
     }
   };
 
+  const handleDownloadImage = async () => {
+    if (!tierListRef.current) return;
+    const el = tierListRef.current;
+    const canvas = await html2canvas(el);
+
+    const data = canvas.toDataURL('image/png', 1.0);
+    const link = document.createElement('a');
+
+    if (typeof link.download === 'string') {
+      link.href = data;
+      link.download = 'tierlist.png';
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    } else {
+      window.open(data);
+    }
+  };
+
   return (
     <div className='bg-[#2d3436] w-full h-full pb-5'>
       <div className='bg-[#2d3436] w-full h-12 flex flex-row justify-center items-center text-[#dfe6e9] text-2xl border-b-2'>
         NwTierList
       </div>
       <DndContext onDragEnd={handleDragEnd}>
-        <div className='flex flex-col w-full'>
+        <div className='flex flex-col w-full' ref={tierListRef}>
           {tierLevels.map(tier_level => (
             <Tier
               color={tier_level.color}
@@ -61,40 +83,48 @@ const App = () => {
               ))}
           </div>
         )}
-        <div
-          className='border border-[#dfe6e9] w-32 text-center cursor-pointer  text-[#dfe6e9] hover:text-[#2d3436] hover:bg-[#dfe6e9] 
-          hover:rounded-xl hover:scale-110 active:text-[#2d3436] active:bg-[#dfe6e9] active:rounded-xl active:scale-110 rounded-lg mt-5 ms-auto me-auto 
-          transition-all duration-300 ease-in-out'
-          onClick={clickUpload}
-        >
-          <span>Add photo</span>
-          <input
-            type='file'
-            name='imageUpload'
-            accept='.jpeg'
-            ref={uploadBtn}
-            multiple
-            style={{ display: 'none' }}
-            onChange={event => {
-              console.log(event.target.files);
-              if (event.target.files) {
-                const upload_images: tierImage[] = [];
-                for (let i = 0; i < event.target.files.length; i++) {
-                  const url = URL.createObjectURL(event.target.files[i]);
-                  upload_images.push({
-                    url: url,
-                    name: event.target.files[i].name.replace('.jpeg', ''),
-                    category: '',
-                  });
-                }
-                handleAdd(upload_images);
-              }
-            }}
-          />
-        </div>
         <TierModal />
         <EditTierModal />
       </DndContext>
+      <div
+        className='border border-[#dfe6e9] w-32 text-center cursor-pointer  text-[#dfe6e9] hover:text-[#2d3436] hover:bg-[#dfe6e9] 
+          hover:rounded-xl hover:scale-110 active:text-[#2d3436] active:bg-[#dfe6e9] active:rounded-xl active:scale-110 rounded-lg mt-5 ms-auto me-auto 
+          transition-all duration-300 ease-in-out'
+        onClick={clickUpload}
+      >
+        <span>Add photo</span>
+        <input
+          type='file'
+          name='imageUpload'
+          accept='.jpeg'
+          ref={uploadBtn}
+          multiple
+          style={{ display: 'none' }}
+          onChange={event => {
+            console.log(event.target.files);
+            if (event.target.files) {
+              const upload_images: tierImage[] = [];
+              for (let i = 0; i < event.target.files.length; i++) {
+                const url = URL.createObjectURL(event.target.files[i]);
+                upload_images.push({
+                  url: url,
+                  name: event.target.files[i].name.replace('.jpeg', ''),
+                  category: '',
+                });
+              }
+              handleAdd(upload_images);
+            }
+          }}
+        />
+      </div>
+      <div
+        className='border border-[#dfe6e9] w-32 text-center cursor-pointer  text-[#dfe6e9] hover:text-[#2d3436] hover:bg-[#dfe6e9] 
+          hover:rounded-xl hover:scale-110 active:text-[#2d3436] active:bg-[#dfe6e9] active:rounded-xl active:scale-110 rounded-lg mt-5 ms-auto me-auto 
+          transition-all duration-300 ease-in-out'
+        onClick={handleDownloadImage}
+      >
+        <span>Export as PNG</span>
+      </div>
 
       <div className='w-full text-[#dfe6e9] flex flex-row items-center justify-center md:justify-end mt-5 gap-1 md:pe-5'>
         <a href='https://git.nwaifu.su/sergey/NwTierList' target='_blank'>

src/components/Tier.tsx

@@ -58,7 +58,7 @@ export const Tier = ({ color, name, textColor, id }: TierProps) => {
           </button>
           <p>{name}</p>
         </div>
-        <div className='image-container flex flex-row flex-wrap justify-between w-full h-auto'>
+        <div className='image-container flex flex-row flex-wrap justify-start w-full h-auto gap-1'>
           {tierImages
             .filter(image => image.category === name)
             .map((image, index) => (