feat: Add support webp (#9)

yurucam · Mar 29, 2024 · 6b54682 · 6b54682
2 parents 3558cfe + 9ec50e3
commit 6b54682
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 6 deletions.
diff --git a/web/src/components/ExportToWebpToggle.tsx b/web/src/components/ExportToWebpToggle.tsx
@@ -0,0 +1,18 @@
+import { Toggle } from 'konsta/react';
+import { useEffect, useState } from 'react';
+
+const ExportToWebpToggle = () => {
+	const [exportToWebp, setExportToWebp] = useState(localStorage.getItem('exportToWebp') || 'no');
+
+	useEffect(() => {
+		localStorage.setItem('exportToWebp', exportToWebp);
+	}, [exportToWebp]);
+
+	return (
+		<>
+			<Toggle checked={exportToWebp === 'yes'} onChange={() => setExportToWebp(exportToWebp === 'yes' ? 'no' : 'yes')} />
+		</>
+	);
+};
+
+export default ExportToWebpToggle;
diff --git a/web/src/frames/cinemaScope.ts b/web/src/frames/cinemaScope.ts
@@ -28,10 +28,10 @@ export async function cinemaScope(photo: Photo) {
 				trimmedImageHeight
 			);
 
-			const data = canvas.toDataURL('image/jpeg');
+			const data = canvas.toDataURL(localStorage.getItem('exportToWebp') === 'yes' ? 'image/webp' : 'image/jpeg');
 			const a = document.createElement('a');
 			a.href = data;
-			a.download = photo.name;
+			a.download = localStorage.getItem('exportToWebp') === 'yes' ? photo.name.replace(/\.[^/.]+$/, '.webp') : photo.name;
 			a.click();
 
 			await new Promise((resolve) => setTimeout(resolve, 1000));

diff --git a/web/src/frames/simple.ts b/web/src/frames/simple.ts
@@ -45,10 +45,10 @@ export async function simpleFrame(photo: Photo) {
 				textVerticalCenter + LINE_SPACING + FONT_SIZE
 			);
 
-			const data = canvas.toDataURL('image/jpeg');
+			const data = canvas.toDataURL(localStorage.getItem('exportToWebp') === 'yes' ? 'image/webp' : 'image/jpeg');
 			const a = document.createElement('a');
 			a.href = data;
-			a.download = photo.name;
+			a.download = localStorage.getItem('exportToWebp') === 'yes' ? photo.name.replace(/\.[^/.]+$/, '.webp') : photo.name;
 			a.click();
 
 			await new Promise((resolve) => setTimeout(resolve, 1000));

diff --git a/web/src/frames/square.ts b/web/src/frames/square.ts
@@ -53,10 +53,10 @@ export async function squareFrame(photo: Photo) {
 				textVerticalCenter + LINE_SPACING + FONT_SIZE
 			);
 
-			const data = canvas.toDataURL('image/jpeg');
+			const data = canvas.toDataURL(localStorage.getItem('exportToWebp') === 'yes' ? 'image/webp' : 'image/jpeg');
 			const a = document.createElement('a');
 			a.href = data;
-			a.download = photo.name;
+			a.download = localStorage.getItem('exportToWebp') === 'yes' ? photo.name.replace(/\.[^/.]+$/, '.webp') : photo.name;
 			a.click();
 
 			await new Promise((resolve) => setTimeout(resolve, 1000));

diff --git a/web/src/pages/SettingPage.tsx b/web/src/pages/SettingPage.tsx
@@ -1,12 +1,14 @@
 import { BlockTitle, List, ListItem } from 'konsta/react';
 import DarkModeToggle from '../components/DarkModeToggle';
+import ExportToWebpToggle from '../components/ExportToWebpToggle';
 
 const SettingPage = () => {
 	return (
 		<>
 			<BlockTitle>Customize</BlockTitle>
 			<List strong inset>
 				<ListItem label title="Enable Dark Mode" after={<DarkModeToggle />} />
+				<ListItem label title="Export to Webp" after={<ExportToWebpToggle />} />
 			</List>
 		</>
 	);