test save button

Author: megane42

src/components/SaveButton/index.tsx

@@ -0,0 +1,39 @@
+import { Button, Box, SxProps, Theme } from '@mui/material';
+import SaveIcon from '@mui/icons-material/Save';
+import { useSaveButton } from '@/components/SaveButton/useSaveButton';
+
+type Props = {
+  text: string;
+  canvas?: HTMLCanvasElement;
+  sx?: SxProps<Theme>;
+};
+
+const SaveButton = ({ text, canvas, sx }: Props) => {
+  const { onButtonClick } = useSaveButton(canvas);
+
+  return (
+    <Box sx={{ width: "100%" }}>
+      <Button
+        variant="outlined"
+        color="primary"
+        startIcon={<SaveIcon />}
+        onClick={onButtonClick}
+        sx={{
+          textTransform: 'none',
+          borderRadius: 0,
+          boxShadow: 0,
+          padding: '8px 16px',
+          fontFamily: 'Instrument Serif',
+          fontWeight: 400,
+          letterSpacing: '2px',
+          width: "100%",
+          ...sx,
+        }}
+      >
+        {text}
+      </Button>
+    </Box>
+  );
+};
+
+export default SaveButton; 

src/components/SaveButton/useSaveButton.ts

@@ -0,0 +1,33 @@
+export const useSaveButton = (canvas?: HTMLCanvasElement) => {
+  const onButtonClick = async () => {
+    if (canvas) {
+      try {
+        // Convert canvas to blob
+        const blob = await new Promise<Blob>((resolve) => {
+          canvas.toBlob((blob) => { if (blob) resolve(blob); }, 'image/png');
+        });
+
+        // Create a download link
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = 'hitbox.png';
+        
+        // Trigger download
+        document.body.appendChild(link);
+        link.click();
+        
+        // Cleanup
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+      } catch (error) {
+        console.error('Failed to save image:', error);
+        alert('画像の保存に失敗しました。');
+      }
+    }
+  };
+
+  return {
+    onButtonClick,
+  };
+}; 

src/pages/HomePage/index.tsx

@@ -6,6 +6,7 @@ import CameraOpenButton from "@/components/CameraOpenButton";
 import ImageCanvas from '@/components/ImageCanvas';
 import ImageSelectButton from '@/components/ImageSelectButton';
 import ShareButton from '@/components/ShareButton';
+import SaveButton from '@/components/SaveButton';
 import { useHomePage } from '@/pages/HomePage/useHomePage';
 
 const HomePage = () => {
@@ -33,6 +34,9 @@ const HomePage = () => {
           <Box sx={{ display: "flex", gap: 2 }}>
             <ShareButton text="Share" canvas={canvas}/>
           </Box>
+          <Box sx={{ display: "flex", gap: 2 }}>
+            <SaveButton text="Save" canvas={canvas}/>
+          </Box>
         </Box>
       </Box>