Add image compression

agatemosu · Dec 29, 2024 · 2474e4d · 2474e4d
1 parent 7645025
commit 2474e4d
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
 	},
 	"dependencies": {
 		"@simonwep/pickr": "1.9.1",
+		"browser-image-compression": "^2.0.2",
 		"sortablejs": "1.15.6"
 	},
 	"devDependencies": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/main.js b/src/main.js
@@ -1,5 +1,6 @@
 import Sortable from "sortablejs";
 import TierRow from "./tier-row.js";
+import imageCompression from "browser-image-compression";
 
 // #region Document events
 
@@ -75,13 +76,17 @@ function uploadImages(files) {
 		imageEl.classList.add("tier-element");
 		imagesBar.appendChild(imageEl);
 
-		const image = new Image();
-		image.onload = () => {
-			imageEl.style.aspectRatio = `${image.width} / ${image.height}`;
-			imageEl.style.backgroundImage = `url("${image.src}")`;
-			imageEl.style.minHeight = `${Math.min(image.height, 80)}px`;
-		};
-		image.src = URL.createObjectURL(file);
+		imageCompression(file, {
+			maxWidthOrHeight: 480,
+		}).then((compressedFile) => {
+			const image = new Image();
+			image.onload = () => {
+				imageEl.style.aspectRatio = `${image.width} / ${image.height}`;
+				imageEl.style.backgroundImage = `url("${image.src}")`;
+				imageEl.style.minHeight = `${Math.min(image.height, 80)}px`;
+			};
+			image.src = URL.createObjectURL(compressedFile);
+		});
 	}
 }