-
-
-
-
-
- {hasImages && (
-
-
-
-
-
-
- )}
+
-
- Upload Images
- fileInputRef.current?.click()}
- >
-
-
-
-
- Click or drag and drop to upload
-PNG, JPG, WEBP supported
-
- Uploaded Images
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Remove all uploaded images.
-Convert and download all images with the current settings.
-
- {previewUrls.map((url, index) => {
- const finalFilename = generateFinalFilename(index);
- return (
-
-
- 
-
- );
- })}
-
-
- handleFilenameChange(index, e.target.value)}
- className="text-sm font-medium h-8 mt-1"
- />
-
- - Final name: {finalFilename}.{format} -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Download this image
-Remove this image
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Image Settings
-- Adjust resolution and scaling for all images. -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Choose a preset aspect ratio or select 'Custom' to enter dimensions manually.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Set the output width in pixels. Leave blank to use the original width.
-Swap the entered width and height values.
-
-
-
-
-
-
-
-
-
-
-
-
- Set the output height in pixels. Leave blank to use the original height.
-
- setKeepOrientation(Boolean(checked))} />
-
-
-
-
- {scaleMode !== 'fill' && (
-
-
-
-
-
-
-
-
-
-
- Determines how the image fits into the new dimensions.
-
- setObjectPosition(pos)} />
-
- )}
-
-
-
-
-
-
-
-
-
- Sets the anchor point for 'Cover' or 'Contain' scaling.
-
-
- Filename Settings
-Customize the output filenames.
-
-
-
-
- {useDefaultBaseName && (
-
-
-
- )}
-
- setDefaultBaseName(e.target.value)}
- />
-
-
-
-
-
-
-
-
- Apply this base name to all currently uploaded images.
-
-
-
-
-
-
-
-
-
-
-
- setPrefix(e.target.value)} />
- Add text to the beginning of every filename.
-
-
-
-
-
-
-
-
-
-
-
- setSuffix(e.target.value)} />
- Add text to the end of every filename (before the number).
-
-
- {useCounter && (
-
-
- )}
-
-
-
-
-
-
-
-
-
-
-
- setCounterStart(Math.max(0, Number(e.target.value)))}
- min="0"
- />
- The first number to use in the sequence.
-
-
-
-
-
-
-
-
-
-
-
- setCounterDigits(Math.max(1, Number(e.target.value)))}
- min="1"
- />
- Total number of digits for the counter, padded with leading zeros (e.g., 3 for 001).
-
-
- Quality Settings
-Choose format and compression level.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Choose the output file format for the images.
-
- setQuality(value[0])}
- disabled={format === 'png'}
- />
- {format === 'png' && (
-
-
-
-
-
-
-
-
-
-
-
-
- {quality}%
- Set compression quality for JPEG/WEBP. Higher is better quality but larger file size.
-Quality slider is disabled for PNG (lossless format).
- )} -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ Reset all settings to their default values.
-Confirm and apply all the settings above. This does not download the images.
-
+ 
+
+
+
+ onFilenameChange(index, e.target.value)}
+ className="text-sm font-medium h-8 mt-1"
+ />
+
+ + Final name: {finalFilename}.{settings.format} +
+
+
+
+
+
+
+
+
+
+
+
+
+ Download this image
Remove this image
+ Uploaded Images
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Remove all uploaded images.
Convert and download all images with the current settings.
+ {images.map((image, index) => (
+
+
+
+ Upload Images
+ fileInputRef.current?.click()}
+ >
+
+
+
+
+ Click or drag and drop to upload
+PNG, JPG, WEBP supported
+
+
+ Image Settings
+Adjust resolution and scaling for all images.
+
+
+ Filename Settings
+Customize the output filenames.
+
+
+ Quality Settings
+Choose format and compression level.
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/settings/image-settings.tsx b/src/components/settings/image-settings.tsx
new file mode 100644
index 0000000..d6366aa
--- /dev/null
+++ b/src/components/settings/image-settings.tsx
@@ -0,0 +1,124 @@
+"use client";
+
+import { ConversionSettings, ObjectPosition } from "@/types";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { ArrowRightLeft, HelpCircle } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { ObjectPositionControl } from "@/components/object-position-control";
+
+const aspectRatios = [
+ { name: "Custom", value: "custom" },
+ { name: "1:1 (Square)", value: "1/1" },
+ { name: "4:3 (Standard)", value: "4/3" },
+ { name: "3:2 (Photography)", value: "3/2" },
+ { name: "16:9 (Widescreen)", value: "16/9" },
+];
+
+interface ImageSettingsProps {
+ settings: ConversionSettings;
+ onSettingsChange: (settings: Partial
+ onSettingsChange({ useDefaultBaseName: checked })} />
+
+
+ {settings.useDefaultBaseName && (
+
+
+
+ )}
+
+ onSettingsChange({ defaultBaseName: e.target.value })}
+ />
+
+
+
+
+
+
+ Apply this base name to all currently uploaded images.
+
+
+
+
+
+
+ onSettingsChange({ prefix: e.target.value })} />
+ Add text to the beginning of every filename.
+
+
+
+
+
+
+ onSettingsChange({ suffix: e.target.value })} />
+ Add text to the end of every filename (before the number).
+ onSettingsChange({ useCounter: checked })} />
+
+
+ {settings.useCounter && (
+
+
+ )}
+
+
+
+
+
+
+
+ onSettingsChange({ counterStart: Math.max(0, Number(e.target.value)) })}
+ min="0"
+ />
+ The first number to use in the sequence.
+
+
+
+
+
+
+ onSettingsChange({ counterDigits: Math.max(1, Number(e.target.value)) })}
+ min="1"
+ />
+ Total number of digits for the counter, padded with leading zeros (e.g., 3 for 001).
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/settings/quality-settings.tsx b/src/components/settings/quality-settings.tsx
new file mode 100644
index 0000000..656d75d
--- /dev/null
+++ b/src/components/settings/quality-settings.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import { ConversionSettings, ImageFormat } from "@/types";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Slider } from "@/components/ui/slider";
+import { HelpCircle } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+
+interface QualitySettingsProps {
+ settings: ConversionSettings;
+ onSettingsChange: (settings: Partial
+
+
+
+
+
+
+
+ Choose a preset aspect ratio or select 'Custom' to enter dimensions manually.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ { onSettingsChange({ width: e.target.value, aspectRatio: 'custom' }) }} />
+ Set the output width in pixels. Leave blank to use the original width.
Swap the entered width and height values.
+
+
+
+
+
+
+ { onSettingsChange({ height: e.target.value, aspectRatio: 'custom' }) }} />
+ Set the output height in pixels. Leave blank to use the original height.
+ onSettingsChange({ keepOrientation: Boolean(checked) })} />
+
+
+
+
+ {settings.scaleMode !== 'fill' && (
+
+
+
+
+
+
+ Determines how the image fits into the new dimensions.
+ onSettingsChange({ objectPosition: pos as ObjectPosition })} />
+
+ )}
+
+
+
+
+
+ Sets the anchor point for 'Cover' or 'Contain' scaling.
+
+ );
+}
\ No newline at end of file
diff --git a/src/hooks/use-image-converter.ts b/src/hooks/use-image-converter.ts
new file mode 100644
index 0000000..99fcace
--- /dev/null
+++ b/src/hooks/use-image-converter.ts
@@ -0,0 +1,190 @@
+import { useState, useEffect, useCallback } from "react";
+import { toast } from "sonner";
+import { ImageFile, ConversionSettings } from "@/types";
+import { processImage, generateFinalFilename, downloadDataUrl } from "@/lib/image-processor";
+
+export const initialSettings: ConversionSettings = {
+ width: "",
+ height: "",
+ aspectRatio: "custom",
+ keepOrientation: true,
+ format: "webp",
+ quality: 90,
+ prefix: "",
+ suffix: "",
+ useCounter: false,
+ counterStart: 1,
+ counterDigits: 3,
+ useDefaultBaseName: false,
+ defaultBaseName: "",
+ scaleMode: 'cover',
+ objectPosition: 'center center',
+};
+
+export function useImageConverter() {
+ const [images, setImages] = useState
+
+
+
+
+
+
+
+ Choose the output file format for the images.
+ onSettingsChange({ quality: value[0] })}
+ disabled={settings.format === 'png'}
+ />
+ {settings.format === 'png' && (
+
+
+
+
+
+
+
+
+ {settings.quality}%
+ Set compression quality for JPEG/WEBP. Higher is better quality but larger file size.
Quality slider is disabled for PNG (lossless format).
+ )} +