feat: compress image

src/components/result/ToolFileResult.tsx

@@ -15,7 +15,7 @@ export default function ToolFileResult({
 }: {
   title?: string;
   value: File | null;
-  extension: string;
+  extension?: string;
   loading?: boolean;
   loadingText?: string;
 }) {
@@ -50,9 +50,11 @@ export default function ToolFileResult({
 
   const handleDownload = () => {
     if (value) {
-      const hasExtension = value.name.includes('.');
-      const filename = hasExtension ? value.name : `${value.name}.${extension}`;
-
+      let filename: string = value.name;
+      if (extension) {
+        const hasExtension = filename.includes('.');
+        filename = hasExtension ? filename : `${filename}.${extension}`;
+      }
       const blob = new Blob([value], { type: value.type });
       const url = window.URL.createObjectURL(blob);
       const a = document.createElement('a');

src/pages/tools/image/generic/compress/index.tsx

@@ -0,0 +1,123 @@
+import React, { useContext, useState } from 'react';
+import { InitialValuesType } from './types';
+import { compressImage } from './service';
+import ToolContent from '@components/ToolContent';
+import ToolImageInput from '@components/input/ToolImageInput';
+import { ToolComponentProps } from '@tools/defineTool';
+import ToolFileResult from '@components/result/ToolFileResult';
+import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
+import { Box } from '@mui/material';
+import Typography from '@mui/material/Typography';
+import { CustomSnackBarContext } from '../../../../../contexts/CustomSnackBarContext';
+import { updateNumberField } from '@utils/string';
+
+const initialValues: InitialValuesType = {
+  maxFileSizeInMB: 1.0,
+  quality: 80
+};
+
+export default function CompressImage({ title }: ToolComponentProps) {
+  const [input, setInput] = useState<File | null>(null);
+  const [result, setResult] = useState<File | null>(null);
+  const [isProcessing, setIsProcessing] = useState<boolean>(false);
+  const [originalSize, setOriginalSize] = useState<number | null>(null); // Store original file size
+  const [compressedSize, setCompressedSize] = useState<number | null>(null); // Store compressed file size
+  const { showSnackBar } = useContext(CustomSnackBarContext);
+
+  const compute = async (values: InitialValuesType, input: File | null) => {
+    if (!input) return;
+
+    setOriginalSize(input.size);
+    try {
+      setIsProcessing(true);
+
+      const compressed = await compressImage(input, values);
+
+      if (compressed) {
+        setResult(compressed);
+        setCompressedSize(compressed.size);
+      } else {
+        showSnackBar('Failed to compress image. Please try again.', 'error');
+      }
+    } catch (err) {
+      console.error('Error in compression:', err);
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  return (
+    <ToolContent
+      title={title}
+      input={input}
+      inputComponent={
+        <ToolImageInput
+          value={input}
+          onChange={setInput}
+          accept={['image/*']}
+          title={'Input image'}
+        />
+      }
+      resultComponent={
+        <ToolFileResult
+          title={'Compressed image'}
+          value={result}
+          loading={isProcessing}
+        />
+      }
+      initialValues={initialValues}
+      getGroups={({ values, updateField }) => [
+        {
+          title: 'Compression options',
+          component: (
+            <Box>
+              <TextFieldWithDesc
+                label="Max File Size (MB)"
+                name="maxFileSizeInMB"
+                type="number"
+                inputProps={{ min: 0.1, step: 0.1 }}
+                description="Maximum file size in megabytes"
+                onOwnChange={(value) =>
+                  updateNumberField(value, 'maxFileSizeInMB', updateField)
+                }
+                value={values.maxFileSizeInMB}
+              />
+              <TextFieldWithDesc
+                label="Quality (%)"
+                name="quality"
+                type="number"
+                inputProps={{ min: 10, max: 100, step: 1 }}
+                description="Image quality percentage (lower means smaller file size)"
+                onOwnChange={(value) =>
+                  updateNumberField(value, 'quality', updateField)
+                }
+                value={values.quality}
+              />
+            </Box>
+          )
+        },
+        {
+          title: 'File sizes',
+          component: (
+            <Box>
+              <Box>
+                {originalSize !== null && (
+                  <Typography>
+                    Original Size: {(originalSize / 1024).toFixed(2)} KB
+                  </Typography>
+                )}
+                {compressedSize !== null && (
+                  <Typography>
+                    Compressed Size: {(compressedSize / 1024).toFixed(2)} KB
+                  </Typography>
+                )}
+              </Box>
+            </Box>
+          )
+        }
+      ]}
+      compute={compute}
+      setInput={setInput}
+    />
+  );
+}

src/pages/tools/image/generic/compress/meta.ts

@@ -0,0 +1,14 @@
+import { defineTool } from '@tools/defineTool';
+import { lazy } from 'react';
+
+export const tool = defineTool('image-generic', {
+  name: 'Compress Image',
+  path: 'compress',
+  component: lazy(() => import('./index')),
+  icon: 'material-symbols-light:compress-rounded',
+  description:
+    'Compress images to reduce file size while maintaining reasonable quality.',
+  shortDescription:
+    'Compress images to reduce file size while maintaining reasonable quality.',
+  keywords: ['image', 'compress', 'reduce', 'quality']
+});

src/pages/tools/image/generic/compress/service.ts

@@ -0,0 +1,30 @@
+import { InitialValuesType } from './types';
+import imageCompression from 'browser-image-compression';
+
+export const compressImage = async (
+  file: File,
+  options: InitialValuesType
+): Promise<File | null> => {
+  try {
+    const { maxFileSizeInMB, quality } = options;
+
+    // Configuration for the compression library
+    const compressionOptions = {
+      maxSizeMB: maxFileSizeInMB,
+      maxWidthOrHeight: 1920, // Reasonable default for most use cases
+      useWebWorker: true,
+      initialQuality: quality / 100 // Convert percentage to decimal
+    };
+
+    // Compress the image
+    const compressedFile = await imageCompression(file, compressionOptions);
+
+    // Create a new file with the original name
+    return new File([compressedFile], file.name, {
+      type: compressedFile.type
+    });
+  } catch (error) {
+    console.error('Error compressing image:', error);
+    return null;
+  }
+};

src/pages/tools/image/generic/compress/types.ts

@@ -0,0 +1,4 @@
+export interface InitialValuesType {
+  maxFileSizeInMB: number;
+  quality: number;
+}

src/pages/tools/image/generic/index.ts

@@ -1,3 +1,4 @@
 import { tool as resizeImage } from './resize/meta';
+import { tool as compressImage } from './compress/meta';
 
-export const imageGenericTools = [resizeImage];
+export const imageGenericTools = [resizeImage, compressImage];