feat: Add no frame (#10)

web/src/frames/no-frame.ts

@@ -0,0 +1,29 @@
+import Photo from '../domain/photo';
+
+export async function noFrame(photo: Photo) {
+	return new Promise<void>((resolve) => {
+		const canvas = document.getElementById('canvas') as HTMLCanvasElement;
+		const context = canvas.getContext('2d') as CanvasRenderingContext2D;
+
+		const image = new Image();
+		image.src = photo.url;
+		image.onload = async () => {
+			canvas.width = photo.width;
+			canvas.height = photo.height;
+
+			context.fillStyle = '#ffffff';
+			context.fillRect(0, 0, canvas.width, canvas.height);
+			context.drawImage(image, 0, 0, photo.width, photo.height);
+
+			const data = canvas.toDataURL(localStorage.getItem('exportToWebp') === 'yes' ? 'image/webp' : 'image/jpeg');
+			const a = document.createElement('a');
+			a.href = data;
+			a.download = localStorage.getItem('exportToWebp') === 'yes' ? photo.name.replace(/\.[^/.]+$/, '.webp') : photo.name;
+			a.click();
+
+			await new Promise((resolve) => setTimeout(resolve, 1000));
+
+			resolve();
+		};
+	});
+}

web/src/pages/FramePage.tsx

@@ -6,12 +6,14 @@ import PhotoUploadButton from '../components/PhotoUploadButton';
 import { simpleFrame } from '../frames/simple';
 import { squareFrame } from '../frames/square';
 import { cinemaScope } from '../frames/cinemaScope';
+import { noFrame } from '../frames/no-frame';
 
 const FramePage = () => {
 	const frames = [
+		{ name: 'No Frame', func: noFrame },
 		{ name: 'Simple', func: simpleFrame },
 		{ name: 'Square', func: squareFrame },
-		{ name: 'CinemaScope', func: cinemaScope },
+		{ name: 'Cinema Scope', func: cinemaScope },
 	];
 
 	const [photos, setPhotos] = useState<Photo[]>([]);