Don't stretch images

Pad to square with transparency. No more restriction on aspect ratio

manage.js

@@ -96,39 +96,26 @@ async function addFiles(files) {
 		try {
 			let image = await loadImage(URL.createObjectURL(file));
 
-/*			let width = image.width;
+			let width = image.width;
 			let height = image.height;
-			const MIN = 64, MAX = 2048;
+			const MIN = 64, MAX = 512; // VRChat API will accept and store images up to 2048x2048, but the game seems to resize everything to 512x512.
 			let aspectRatio = width / height;
-			if (aspectRatio < (MIN/MAX) || aspectRatio > (MAX/MIN)) throw new Error("Invalid aspect ratio");
 			if (height > width) {
-				if (height > MAX) {
+				height = Math.max(MIN, Math.min(MAX, height));
-					height = MAX;
+				width = height * aspectRatio;
-					width = height * aspectRatio;
-				}
-				if (width < MIN) {
-					width = MIN;
-					height = width * (1/aspectRatio);
-				}
 			} else {
-				if (width > MAX) {
+				width = Math.max(MIN, Math.min(MAX, width));
-					width = MAX;
+				height = width * (1/aspectRatio);
-					height = width * (1/aspectRatio);
+			}
-				}
+			let largestDim = Math.max(width, height);
-				if (height < MIN) {
+			let offsetX = (largestDim - width) / 2;
-					height = MIN;
+			let offsetY = (largestDim - height) / 2;
-					width = height * aspectRatio;
-				}
-			} */
-
-			// Although VRChat will store the original image within 64-2048px, it looks like the game resizes it to 512x512.
-			let width = 512, height = 512;
 
 			let canvas = document.createElement("canvas");
-			canvas.width = width;
+			canvas.width = largestDim;
-			canvas.height = height;
+			canvas.height = largestDim;
 			let ctx = canvas.getContext("2d");
-			ctx.drawImage(image, 0, 0, width, height);
+			ctx.drawImage(image, offsetX, offsetY, width, height);
 			let data = canvas.toDataURL();
 			URL.revokeObjectURL(image.src);
 			let e = {

manifest.json

@@ -1,8 +1,8 @@
 {
 	"manifest_version": 3,
 	"name": "VRChat Emoji Manager",
-	"version": "1.2023.11.1",
+	"version": "1.2024.10.7",
-	"description": "Store more than 5 emoji, toggle them on and off and change their animation styles.",
+	"description": "Store more than 9 emoji, toggle them on and off and change their animation styles.",
 	"homepage_url": "https://gitea.moe/lamp/vrchat-emoji-manager",
 	"icons": {
 		"128": "icon128.png"