diff --git a/src/components/image-converter.tsx b/src/components/image-converter.tsx index e17c3dd..7d240f8 100644 --- a/src/components/image-converter.tsx +++ b/src/components/image-converter.tsx @@ -38,6 +38,7 @@ import { } from "@/components/ui/tooltip"; const aspectRatios = [ + { name: "Original", value: "original" }, { name: "Custom", value: "custom" }, { name: "1:1 (Square)", value: "1/1" }, { name: "4:3 (Standard)", value: "4/3" }, @@ -70,6 +71,7 @@ export function ImageConverter() { const [width, setWidth] = useState(initialSettings.width); const [height, setHeight] = useState(initialSettings.height); const [aspectRatio, setAspectRatio] = useState(initialSettings.aspectRatio); + const [originalImageRatio, setOriginalImageRatio] = useState(null); const [keepOrientation, setKeepOrientation] = useState(initialSettings.keepOrientation); const [format, setFormat] = useState<"png" | "jpeg" | "webp">(initialSettings.format); const [quality, setQuality] = useState(initialSettings.quality); @@ -108,6 +110,19 @@ export function ImageConverter() { return; } + if (images.length === 0 && imageFiles.length > 0) { + const firstImage = imageFiles[0]; + const img = new Image(); + img.src = URL.createObjectURL(firstImage); + img.onload = () => { + setOriginalImageRatio(img.naturalWidth / img.naturalHeight); + setAspectRatio("original"); + setWidth(img.naturalWidth); + setHeight(img.naturalHeight); + URL.revokeObjectURL(img.src); + }; + } + const newImages = [...images, ...imageFiles]; const newPreviewUrls = [ ...previewUrls, @@ -159,6 +174,13 @@ export function ImageConverter() { setImages(newImages); setPreviewUrls(newPreviewUrls); setFilenames(newFilenames); + + if (newImages.length === 0) { + setOriginalImageRatio(null); + setAspectRatio(initialSettings.aspectRatio); + setWidth(initialSettings.width); + setHeight(initialSettings.height); + } }; const handleClearAll = () => { @@ -166,6 +188,10 @@ export function ImageConverter() { setImages([]); setPreviewUrls([]); setFilenames([]); + setOriginalImageRatio(null); + setAspectRatio(initialSettings.aspectRatio); + setWidth(initialSettings.width); + setHeight(initialSettings.height); toast.info("All images cleared."); }; @@ -339,13 +365,14 @@ export function ImageConverter() { setDefaultBaseName(initialSettings.defaultBaseName); setScaleMode(initialSettings.scaleMode); setObjectPosition(initialSettings.objectPosition); + setOriginalImageRatio(null); toast.success("All settings have been reset to their defaults."); }; const handleAspectRatioChange = (value: string) => { setAspectRatio(value); - if (value === "custom") { + if (value === "custom" || value === "original") { return; } @@ -369,13 +396,27 @@ export function ImageConverter() { }; const handleWidthChange = (e: React.ChangeEvent) => { - setWidth(e.target.value); - setAspectRatio("custom"); + const newWidthValue = e.target.value; + setWidth(newWidthValue); + + if (aspectRatio === 'original' && originalImageRatio && newWidthValue) { + const newHeight = Math.round(Number(newWidthValue) / originalImageRatio); + setHeight(newHeight); + } else if (aspectRatio !== 'original') { + setAspectRatio("custom"); + } }; const handleHeightChange = (e: React.ChangeEvent) => { - setHeight(e.target.value); - setAspectRatio("custom"); + const newHeightValue = e.target.value; + setHeight(newHeightValue); + + if (aspectRatio === 'original' && originalImageRatio && newHeightValue) { + const newWidth = Math.round(Number(newHeightValue) * originalImageRatio); + setWidth(newWidth); + } else if (aspectRatio !== 'original') { + setAspectRatio("custom"); + } }; const handleSwapDimensions = () => { @@ -543,13 +584,13 @@ export function ImageConverter() { - {aspectRatios.map((ratio) => ( - + {ratio.name} ))}