pascallinxweiler/Webify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[dyad] Added 'Keep Orientation' checkbox - wrote 1 file(s)

Browse Source
This commit is contained in:
[dyad]
2026-01-18 12:11:50 +01:00
parent b42a866cbf
commit a8f5a4ae3f
1 changed files with 21 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/image-converter.tsx
View File

@@ -21,6 +21,7 @@ import { Upload, Download, X, Trash2, Check } from "lucide-react";
import { toast } from "sonner"; import { toast } from "sonner";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { Switch } from "@/components/ui/switch"; import { Switch } from "@/components/ui/switch";
import { Checkbox } from "@/components/ui/checkbox";
import { import {
Accordion, Accordion,
AccordionContent, AccordionContent,
@@ -45,6 +46,7 @@ export function ImageConverter() {
const [width, setWidth] = useState<number | string>(""); const [width, setWidth] = useState<number | string>("");
const [height, setHeight] = useState<number | string>(""); const [height, setHeight] = useState<number | string>("");
const [aspectRatio, setAspectRatio] = useState<string>("custom"); const [aspectRatio, setAspectRatio] = useState<string>("custom");
const [keepOrientation, setKeepOrientation] = useState<boolean>(true);
const [format, setFormat] = useState<"png" | "jpeg" | "webp">("webp"); const [format, setFormat] = useState<"png" | "jpeg" | "webp">("webp");
const [quality, setQuality] = useState<number>(90); const [quality, setQuality] = useState<number>(90);
@@ -145,7 +147,7 @@ export function ImageConverter() {
setFilenames(newFilenames); setFilenames(newFilenames);
}; };
const generateFinalFilename = (index: number, withDimensions: boolean = false) => { const generateFinalFilename = (index: number) => {
const baseName = filenames[index] || "filename"; const baseName = filenames[index] || "filename";
let finalName = `${prefix}${baseName}${suffix}`; let finalName = `${prefix}${baseName}${suffix}`;
@@ -154,10 +156,6 @@ export function ImageConverter() {
finalName += `${counter}`; finalName += `${counter}`;
} }
if (withDimensions && width && height) {
finalName += `_${width}x${height}`;
}
return finalName; return finalName;
}; };
@@ -169,8 +167,16 @@ export function ImageConverter() {
img.onload = () => { img.onload = () => {
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas");
const targetWidth = width ? Number(width) : img.naturalWidth; let targetWidth = width ? Number(width) : img.naturalWidth;
const targetHeight = height ? Number(height) : img.naturalHeight; 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.width = targetWidth;
canvas.height = targetHeight; canvas.height = targetHeight;
@@ -225,7 +231,7 @@ export function ImageConverter() {
const link = document.createElement("a"); const link = document.createElement("a");
link.href = dataUrl; link.href = dataUrl;
const dimensionSuffix = width && height ? `_${width}x${height}` : ''; const dimensionSuffix = width && height ? `_${targetWidth}x${targetHeight}` : '';
link.download = `${generateFinalFilename(index)}${dimensionSuffix}.${format}`; link.download = `${generateFinalFilename(index)}${dimensionSuffix}.${format}`;
document.body.appendChild(link); document.body.appendChild(link);
@@ -369,6 +375,10 @@ export function ImageConverter() {
<Input id="height" type="number" placeholder="Original" value={height} onChange={handleHeightChange} /> <Input id="height" type="number" placeholder="Original" value={height} onChange={handleHeightChange} />
</div> </div>
</div> </div>
<div className="flex items-center space-x-2 pt-2">
<Checkbox id="keep-orientation" checked={keepOrientation} onCheckedChange={(checked) => setKeepOrientation(Boolean(checked))} />
<Label htmlFor="keep-orientation" className="cursor-pointer">Keep original orientation</Label>
</div>
</div> </div>
<div className="mt-4 space-y-2"> <div className="mt-4 space-y-2">
<Label htmlFor="scale-mode">Scaling</Label> <Label htmlFor="scale-mode">Scaling</Label>
@@ -527,7 +537,9 @@ export function ImageConverter() {
<CardContent> <CardContent>
<div className="space-y-4"> <div className="space-y-4">
{previewUrls.map((url, index) => { {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 ( return (
<div key={url} className="p-4 border rounded-lg flex items-center gap-4"> <div key={url} className="p-4 border rounded-lg flex items-center gap-4">
<img src={url} alt={`Preview ${index + 1}`} className="w-20 h-20 object-cover rounded-md shrink-0" /> <img src={url} alt={`Preview ${index + 1}`} className="w-20 h-20 object-cover rounded-md shrink-0" />