feat: Derek/export png (#95)

* Attempting to use more lightweight version

* Did not work.

* This is not what I wanted

* The image saves correctly. Needs padding

* Padding !!

* Removed downloadjs

* Padding more

package.json

@@ -25,6 +25,7 @@
         "clsx": "^2.1.0",
         "highcharts": "^11.3.0",
         "highcharts-react-official": "^3.2.1",
+        "html-to-image": "^1.11.11",
         "html2canvas": "^1.4.1",
         "react": "^18.2.0",
         "react-devtools-core": "^5.0.0",

pnpm-lock.yaml

@@ -37,6 +37,9 @@ dependencies:
   highcharts-react-official:
     specifier: ^3.2.1
     version: 3.2.1(highcharts@11.3.0)(react@18.2.0)
+  html-to-image:
+    specifier: ^1.11.11
+    version: 1.11.11
   html2canvas:
     specifier: ^1.4.1
     version: 1.4.1
@@ -8670,6 +8673,10 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /html-to-image@1.11.11:
+    resolution: {integrity: sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA==}
+    dev: false
+
   /html2canvas@1.4.1:
     resolution: {integrity: sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==}
     engines: {node: '>=8.0.0'}

src/views/components/common/CalendarGrid/CalendarGrid.tsx

@@ -1,5 +1,7 @@
 import React, { useRef } from 'react';
-import html2canvas from 'html2canvas';
+// import html2canvas from 'html2canvas';
+import * as htmlToImage from 'html-to-image';
+import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';
 import { DAY_MAP } from 'src/shared/types/CourseMeeting';
 import { CalendarGridCourse } from 'src/views/hooks/useFlattenedCourseSchedule';
 import calIcon from 'src/assets/icons/cal.svg';
@@ -38,15 +40,42 @@ function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Pr
     const calendarRef = useRef(null); // Create a ref for the calendar grid
 
     const saveAsPNG = () => {
-        if (calendarRef.current) {
+        // if (calendarRef.current) {
-            html2canvas(calendarRef.current).then(canvas => {
+        //     html2canvas(calendarRef.current).then(canvas => {
-                // Create an a element to trigger download
+        //         // Create an a element to trigger download
-                const a = document.createElement('a');
+        //         const a = document.createElement('a');
-                a.href = canvas.toDataURL('image/png');
+        //         a.href = canvas.toDataURL('image/png');
-                a.download = 'calendar.png';
+        //         a.download = 'calendar.png';
-                a.click();
+        //         a.click();
-            });
+        //     });
-        }
+        // }
+        htmlToImage.toPng(calendarRef.current, {
+            backgroundColor: "white",
+            style: { 
+            background: "white",
+            marginTop: "20px",
+            marginBottom: "20px",
+            marginRight: "20px",
+            marginLeft: "20px",}})
+        .then(function (dataUrl) {
+            var img = new Image();
+            img.src = dataUrl;
+            fetch(dataUrl)
+            .then(response => response.blob())
+            .then(blob => {
+                const href = window.URL.createObjectURL(blob);
+                const link = document.createElement('a');
+                link.href = href;
+                link.download = 'my-schedule.png';
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+            })
+            .catch(error => console.error('Error downloading file:', error));
+        })
+        .catch(function (error) {
+            console.error('oops, something went wrong!', error);
+        });
     };
 
     return (