resize image before uploading

app/components/dashboard/AvatarForm.tsx

@@ -6,6 +6,7 @@ import { Avatar } from "~/components/ui/Avatar"
 import { Button } from "~/components/ui/Button"
 import { useFetcher } from "@remix-run/react"
 import toast from "react-hot-toast"
+import createPica from "pica"
 
 const AvatarEditorModal: React.FC<{
   isOpen: boolean
@@ -18,13 +19,14 @@ const AvatarEditorModal: React.FC<{
 
   const cropAndSave = async () => {
     if (!editorRef.current) return
-    const canvas = editorRef.current.getImage()
-    const blob = await new Promise<Blob>((resolve, reject) => {
-      canvas.toBlob((blob) => {
-        if (!blob) return reject(new Error("Canvas is empty"))
-        resolve(blob)
-      })
-    })
+
+    const fromCanvas = editorRef.current.getImage()
+    const toCanvas = document.createElement("canvas")
+    toCanvas.width = 460
+    toCanvas.height = 460
+    const pica = createPica()
+    const result = await pica.resize(fromCanvas, toCanvas)
+    const blob = await pica.toBlob(result, "image/jpeg", 0.9)
     const form = new FormData()
     if (site) {
       form.append("site", site)

package.json

@@ -41,6 +41,7 @@
     "markdown-it": "^13.0.0",
     "morgan": "^1.10.0",
     "nanoid": "^3.3.3",
+    "pica": "^9.0.1",
     "react": "^17.0.2",
     "react-avatar-editor": "^12.0.0",
     "react-dom": "^17.0.2",
@@ -58,6 +59,7 @@
     "@types/express": "^4.17.13",
     "@types/markdown-it": "^12.2.3",
     "@types/morgan": "^1.9.3",
+    "@types/pica": "^9.0.0",
     "@types/react": "^17.0.24",
     "@types/react-avatar-editor": "^12.0.0",
     "@types/react-dom": "^17.0.9",

pnpm-lock.yaml

@@ -19,6 +19,7 @@ specifiers:
   '@types/express': ^4.17.13
   '@types/markdown-it': ^12.2.3
   '@types/morgan': ^1.9.3
+  '@types/pica': ^9.0.0
   '@types/react': ^17.0.24
   '@types/react-avatar-editor': ^12.0.0
   '@types/react-dom': ^17.0.9
@@ -39,6 +40,7 @@ specifiers:
   nanoid: ^3.3.3
   nodemon: ^2.0.16
   npm-run-all: ^4.1.5
+  pica: ^9.0.1
   postcss-import: ^14.1.0
   prisma: ^3.13.0
   react: ^17.0.2
@@ -77,6 +79,7 @@ dependencies:
   markdown-it: 13.0.0
   morgan: 1.10.0
   nanoid: 3.3.3
+  pica: 9.0.1
   react: 17.0.2
   react-avatar-editor: 12.0.0_sfoxds7t5ydpegc3knd667wn6m
   react-dom: 17.0.2_react@17.0.2
@@ -93,6 +96,7 @@ devDependencies:
   '@types/express': 4.17.13
   '@types/markdown-it': 12.2.3
   '@types/morgan': 1.9.3
+  '@types/pica': 9.0.0
   '@types/react': 17.0.44
   '@types/react-avatar-editor': 12.0.0
   '@types/react-dom': 17.0.16
@@ -2287,6 +2291,10 @@ packages:
     resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==}
     dev: true
 
+  /@types/pica/9.0.0:
+    resolution: {integrity: sha512-RyIhhyESvtvUdAviCqpk8fmNHNdSCMQB4ZVyPJLoNndRC8Jml/3zfC0RisHIuGFziM9+vGJ2/1nWXoTwAkVE2Q==}
+    dev: true
+
   /@types/prop-types/15.7.5:
     resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
     dev: true
@@ -4912,6 +4920,10 @@ packages:
       slash: 3.0.0
     dev: true
 
+  /glur/1.1.2:
+    resolution: {integrity: sha1-8g6jbbEDv8KSNDkh8fkeg8NGdok=}
+    dev: false
+
   /goober/2.1.9:
     resolution: {integrity: sha512-PAtnJbrWtHbfpJUIveG5PJIB6Mc9Kd0gimu9wZwPyA+wQUSeOeA4x4Ug16lyaaUUKZ/G6QEH1xunKOuXP1F4Vw==}
     peerDependencies:
@@ -6511,6 +6523,13 @@ packages:
   /ms/2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
+  /multimath/2.0.0:
+    resolution: {integrity: sha512-toRx66cAMJ+Ccz7pMIg38xSIrtnbozk0dchXezwQDMgQmbGpfxjtv68H+L00iFL8hxDaVjrmwAFSb3I6bg8Q2g==}
+    dependencies:
+      glur: 1.1.2
+      object-assign: 4.1.1
+    dev: false
+
   /mute-stream/0.0.8:
     resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==}
     dev: true
@@ -6992,6 +7011,15 @@ packages:
       is-reference: 3.0.0
     dev: true
 
+  /pica/9.0.1:
+    resolution: {integrity: sha512-v0U4vY6Z3ztz9b4jBIhCD3WYoecGXCQeCsYep+sXRefViL+mVVoTL+wqzdPeE+GpBFsRUtQZb6dltvAt2UkMtQ==}
+    dependencies:
+      glur: 1.1.2
+      multimath: 2.0.0
+      object-assign: 4.1.1
+      webworkify: 1.5.0
+    dev: false
+
   /picocolors/1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
 
@@ -8667,6 +8695,10 @@ packages:
       wildcard: 2.0.0
     dev: false
 
+  /webworkify/1.5.0:
+    resolution: {integrity: sha512-AMcUeyXAhbACL8S2hqqdqOLqvJ8ylmIbNwUIqQujRSouf4+eUFaXbG6F1Rbu+srlJMmxQWsiU7mOJi0nMBfM1g==}
+    dev: false
+
   /whatwg-url/5.0.0:
     resolution: {integrity: sha1-lmRU6HZUYuN2RNNib2dCzotwll0=}
     dependencies: