diff --git a/src/components/image-converter.tsx b/src/components/image-converter.tsx index 08eff93..3a46f34 100644 --- a/src/components/image-converter.tsx +++ b/src/components/image-converter.tsx @@ -21,6 +21,7 @@ import { Upload, Download, X, Trash2, Check } from "lucide-react"; import { toast } from "sonner"; import { cn } from "@/lib/utils"; import { Switch } from "@/components/ui/switch"; +import { Checkbox } from "@/components/ui/checkbox"; import { Accordion, AccordionContent, @@ -45,6 +46,7 @@ export function ImageConverter() { const [width, setWidth] = useState(""); const [height, setHeight] = useState(""); const [aspectRatio, setAspectRatio] = useState("custom"); + const [keepOrientation, setKeepOrientation] = useState(true); const [format, setFormat] = useState<"png" | "jpeg" | "webp">("webp"); const [quality, setQuality] = useState(90); @@ -145,7 +147,7 @@ export function ImageConverter() { setFilenames(newFilenames); }; - const generateFinalFilename = (index: number, withDimensions: boolean = false) => { + const generateFinalFilename = (index: number) => { const baseName = filenames[index] || "filename"; let finalName = `${prefix}${baseName}${suffix}`; @@ -154,10 +156,6 @@ export function ImageConverter() { finalName += `${counter}`; } - if (withDimensions && width && height) { - finalName += `_${width}x${height}`; - } - return finalName; }; @@ -169,8 +167,16 @@ export function ImageConverter() { img.onload = () => { const canvas = document.createElement("canvas"); - const targetWidth = width ? Number(width) : img.naturalWidth; - const targetHeight = height ? Number(height) : img.naturalHeight; + let targetWidth = width ? Number(width) : img.naturalWidth; + let targetHeight = height ? Number(height) : img.naturalHeight; + + if (keepOrientation && width && height) { + const isOriginalPortrait = img.naturalHeight > img.naturalWidth; + const isTargetPortrait = Number(height) > Number(width); + if (isOriginalPortrait !== isTargetPortrait) { + [targetWidth, targetHeight] = [targetHeight, targetWidth]; + } + } canvas.width = targetWidth; canvas.height = targetHeight; @@ -225,7 +231,7 @@ export function ImageConverter() { const link = document.createElement("a"); link.href = dataUrl; - const dimensionSuffix = width && height ? `_${width}x${height}` : ''; + const dimensionSuffix = width && height ? `_${targetWidth}x${targetHeight}` : ''; link.download = `${generateFinalFilename(index)}${dimensionSuffix}.${format}`; document.body.appendChild(link); @@ -369,6 +375,10 @@ export function ImageConverter() { +
+ setKeepOrientation(Boolean(checked))} /> + +
@@ -527,7 +537,9 @@ export function ImageConverter() {
{previewUrls.map((url, index) => { - const finalFilename = generateFinalFilename(index, true); + const baseFilename = generateFinalFilename(index); + const dimensionSuffix = width && height ? `_${width}x${height}` : ''; + const finalFilename = `${baseFilename}${dimensionSuffix}`; return (
{`Preview