From bda02826b14b96fd65a6f24218950e510c5aa3d8 Mon Sep 17 00:00:00 2001 From: Lukas Zenick Date: Sun, 18 Feb 2024 12:46:35 -0600 Subject: [PATCH] feat: html2canvas -> htmlToImage and fix derick's bugs --- package.json | 1 - pnpm-lock.yaml | 34 ---------- .../common/CalendarGrid/CalendarGrid.tsx | 66 ++++++++----------- 3 files changed, 29 insertions(+), 72 deletions(-) diff --git a/package.json b/package.json index 96f3e65d..f6ef23d4 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,6 @@ "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", "react-dom": "^18.2.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index abcefb4a..f2526826 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -40,9 +40,6 @@ dependencies: html-to-image: specifier: ^1.11.11 version: 1.11.11 - html2canvas: - specifier: ^1.4.1 - version: 1.4.1 react: specifier: ^18.2.0 version: 18.2.0 @@ -5866,11 +5863,6 @@ packages: resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} dev: true - /base64-arraybuffer@1.0.2: - resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==} - engines: {node: '>= 0.6.0'} - dev: false - /base64-js@1.5.1: resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==} dev: true @@ -6563,12 +6555,6 @@ packages: postcss: 8.4.35 dev: true - /css-line-break@2.1.0: - resolution: {integrity: sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==} - dependencies: - utrie: 1.0.2 - dev: false - /css-select@5.1.0: resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==} dependencies: @@ -8677,14 +8663,6 @@ packages: resolution: {integrity: sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA==} dev: false - /html2canvas@1.4.1: - resolution: {integrity: sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==} - engines: {node: '>=8.0.0'} - dependencies: - css-line-break: 2.1.0 - text-segmentation: 1.0.3 - dev: false - /htmlparser2@8.0.2: resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==} dependencies: @@ -12444,12 +12422,6 @@ packages: minimatch: 3.1.2 dev: true - /text-segmentation@1.0.3: - resolution: {integrity: sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==} - dependencies: - utrie: 1.0.2 - dev: false - /text-table@0.2.0: resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==} dev: true @@ -12992,12 +12964,6 @@ packages: engines: {node: '>= 0.4.0'} dev: true - /utrie@1.0.2: - resolution: {integrity: sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==} - dependencies: - base64-arraybuffer: 1.0.2 - dev: false - /uuid@9.0.1: resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==} hasBin: true diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.tsx b/src/views/components/common/CalendarGrid/CalendarGrid.tsx index 73848a3c..9afa2465 100644 --- a/src/views/components/common/CalendarGrid/CalendarGrid.tsx +++ b/src/views/components/common/CalendarGrid/CalendarGrid.tsx @@ -1,7 +1,5 @@ import React, { useRef } from 'react'; -// 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'; @@ -40,42 +38,36 @@ function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren { - // if (calendarRef.current) { - // html2canvas(calendarRef.current).then(canvas => { - // // Create an a element to trigger download - // const a = document.createElement('a'); - // a.href = canvas.toDataURL('image/png'); - // a.download = 'calendar.png'; - // 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); + htmlToImage + .toPng(calendarRef.current, { + backgroundColor: 'white', + style: { + background: 'white', + marginTop: '20px', + marginBottom: '20px', + marginRight: '20px', + marginLeft: '20px', + }, }) - .catch(error => console.error('Error downloading file:', error)); - }) - .catch(function (error) { - console.error('oops, something went wrong!', error); - }); + .then(dataUrl => { + let 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(error => { + console.error('oops, something went wrong!', error); + }); }; return (