add: jpg save format

Test Notes: n/a

index.html

@@ -13,6 +13,10 @@
         <div class="toolbar-left">
             <button id="selectFolderBtn" class="btn"><i class="fas fa-folder-open"></i> Select Folder</button>
             <button id="addFilesBtn" class="btn"><i class="fas fa-file"></i> Add Files</button>
+            <select id="atlasFormat" class="select">
+                <option value="png" selected>PNG</option>
+                <option value="jpg">JPG</option>
+            </select>
             <select id="atlasSizeSelect" class="select"></select>
             <select id="paddingSelect" class="select">
                 <option value="0" selected>0px</option>

main.js

@@ -5,6 +5,7 @@ const sharp = require("sharp");
 
 let store;
 let main_window;
+let format = "png";
 
 async function initialize_store() {
 	const { default: Store } = await import("electron-store");
@@ -164,16 +165,24 @@ app.whenReady().then(async () => {
 		}
 	});
 
-	ipcMain.handle("save-atlas", async (event, { data_url, default_path, quality }) => {
+	ipcMain.handle("save-atlas", async (event, { data_url, default_path, quality, format }) => {
+		if (!format) {
+			format = "png"; // Default to PNG if format is not provided
+		}
 		const result = await dialog.showSaveDialog({
 			default_path,
-			filters: [{ name: "PNG", extensions: ["png"] }]
+			filters: [{ name: format.toUpperCase(), extensions: [format] }]
 		});
 		if (!result.canceled) {
-			const base64_data = data_url.replace(/^data:image\/png;base64,/, "");
+			const base64_data = data_url.replace(/^data:image\/(png|jpeg);base64,/, "");
 			const buffer = Buffer.from(base64_data, "base64");
-			const png_buffer = await sharp(buffer).png({ quality: Math.round(parseFloat(quality) * 100) }).toBuffer();
-			await fs.writeFile(result.filePath, png_buffer, "base64");
+			let image_buffer;
+			if (format === "jpg") {
+				image_buffer = await sharp(buffer).jpeg({ quality: Math.round(parseFloat(quality) * 100) }).toBuffer();
+			} else {
+				image_buffer = await sharp(buffer).png({ quality: Math.round(parseFloat(quality) * 100) }).toBuffer();
+			}
+			await fs.writeFile(result.filePath, image_buffer, "base64");
 			return result.filePath;
 		}
 	});
@@ -226,7 +235,6 @@ app.whenReady().then(async () => {
 		return store.get("atlas_zoom_factor", 0.6); // Change default to 0.6 (60%)
 	});
 
-	// Add these new IPC handlers
 	ipcMain.handle("save-project", async (event, project_data) => {
 		const result = await dialog.showSaveDialog({
 			title: "Save Project",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "sprite-packer",
   "productName": "Sprite Packer",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "main": "main.js",
   "scripts": {
     "start": "electron .",

preload.js

@@ -19,4 +19,5 @@ contextBridge.exposeInMainWorld("electronAPI", {
 	save_project: (projectData) => ipcRenderer.invoke("save-project", projectData),
 	load_project: () => ipcRenderer.invoke("load-project"),
 	open_external: (url) => ipcRenderer.invoke("open-external", url),
+	select_format: () => ipcRenderer.invoke("select-format"),
 });

renderer.js

@@ -9,6 +9,7 @@ const preview_canvas = document.getElementById("previewCanvas");
 const ctx = preview_canvas.getContext("2d");
 const quality_select = document.getElementById("qualitySelect");
 const canvas_container = document.getElementById("canvasContainer");
+const atlas_format_select = document.getElementById("atlasFormat");
 
 const save_atlas_btn = document.getElementById("saveAtlasBtn");
 const save_project_btn = document.getElementById("saveProjectBtn");
@@ -585,8 +586,13 @@ if (image_files.length > 0) {
 save_atlas_btn.addEventListener("click", async () => {
 	if (packed_atlas_data_url) {
 		try {
-			const default_path = "sprite_atlas.png";
-			const saved_path = await window.electronAPI.save_atlas({ data_url: packed_atlas_data_url, default_path, quality: quality_select.value });
+			const default_path = `sprite_atlas.${atlas_format_select.value}`;
+			const saved_path = await window.electronAPI.save_atlas({
+				data_url: packed_atlas_data_url,
+				default_path,
+				quality: quality_select.value,
+				format: atlas_format_select.value
+			});
 			if (saved_path) {
 
 			}