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

[dyad] Implemented "auto" image dimensioning - wrote 1 file(s)

Browse Source
This commit is contained in:
[dyad]
2026-01-18 13:25:54 +01:00
parent ae0dd76c7a
commit 626ce09686
1 changed files with 32 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -38,7 +38,6 @@ 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" },
@@ -71,7 +70,6 @@ export function ImageConverter() {
const [width, setWidth] = useState<number | string>(initialSettings.width);
const [height, setHeight] = useState<number | string>(initialSettings.height);
const [aspectRatio, setAspectRatio] = useState<string>(initialSettings.aspectRatio);
const [originalImageRatio, setOriginalImageRatio] = useState<number | null>(null);
const [keepOrientation, setKeepOrientation] = useState<boolean>(initialSettings.keepOrientation);
const [format, setFormat] = useState<"png" | "jpeg" | "webp">(initialSettings.format);
const [quality, setQuality] = useState<number>(initialSettings.quality);
@@ -110,19 +108,6 @@ 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,
@@ -174,13 +159,6 @@ 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 = () => {
@@ -188,8 +166,6 @@ export function ImageConverter() {
setImages([]);
setPreviewUrls([]);
setFilenames([]);
setOriginalImageRatio(null);
setAspectRatio(initialSettings.aspectRatio);
setWidth(initialSettings.width);
setHeight(initialSettings.height);
toast.info("All images cleared.");
@@ -221,12 +197,31 @@ export function ImageConverter() {
img.onload = () => {
const canvas = document.createElement("canvas");
let targetWidth = width ? Number(width) : img.naturalWidth;
let targetHeight = height ? Number(height) : img.naturalHeight;
const sourceRatio = img.naturalWidth / img.naturalHeight;
let targetWidth: number;
let targetHeight: number;
if (keepOrientation && width && height) {
const inputWidth = width ? Number(width) : 0;
const inputHeight = height ? Number(height) : 0;
if (inputWidth && !inputHeight) {
targetWidth = inputWidth;
targetHeight = Math.round(targetWidth / sourceRatio);
} else if (!inputWidth && inputHeight) {
targetHeight = inputHeight;
targetWidth = Math.round(targetHeight * sourceRatio);
} else if (inputWidth && inputHeight) {
targetWidth = inputWidth;
targetHeight = inputHeight;
} else {
targetWidth = img.naturalWidth;
targetHeight = img.naturalHeight;
}
if (keepOrientation && (inputWidth || inputHeight)) {
const isOriginalPortrait = img.naturalHeight > img.naturalWidth;
const isTargetPortrait = Number(height) > Number(width);
const isTargetPortrait = targetHeight > targetWidth;
if (isOriginalPortrait !== isTargetPortrait) {
[targetWidth, targetHeight] = [targetHeight, targetWidth];
}
@@ -365,14 +360,13 @@ 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" || value === "original") {
if (value === "custom") {
return;
}
@@ -396,27 +390,13 @@ export function ImageConverter() {
};
const handleWidthChange = (e: React.ChangeEvent<HTMLInputElement>) => {
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");
}
setWidth(e.target.value);
setAspectRatio("custom");
};
const handleHeightChange = (e: React.ChangeEvent<HTMLInputElement>) => {
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");
}
setHeight(e.target.value);
setAspectRatio("custom");
};
const handleSwapDimensions = () => {
@@ -584,13 +564,13 @@ export function ImageConverter() {
</TooltipContent>
</Tooltip>
</div>
<Select value={aspectRatio} onValueChange={handleAspectRatioChange} disabled={!hasImages && aspectRatio === 'original'}>
<Select value={aspectRatio} onValueChange={handleAspectRatioChange}>
<SelectTrigger id="aspect-ratio" className="mt-2">
<SelectValue placeholder="Select aspect ratio" />
</SelectTrigger>
<SelectContent>
{aspectRatios.map((ratio) => (
<SelectItem key={ratio.value} value={ratio.value} disabled={ratio.value === 'original' && !originalImageRatio}>
<SelectItem key={ratio.value} value={ratio.value}>
{ratio.name}
</SelectItem>
))}
@@ -610,7 +590,7 @@ export function ImageConverter() {
</TooltipContent>
</Tooltip>
</div>
<Input id="width" type="number" placeholder="Original" value={width} onChange={handleWidthChange} />
<Input id="width" type="number" placeholder="Auto" value={width} onChange={handleWidthChange} />
</div>
<Tooltip>
<TooltipTrigger asChild>
@@ -634,7 +614,7 @@ export function ImageConverter() {
</TooltipContent>
</Tooltip>
</div>
<Input id="height" type="number" placeholder="Original" value={height} onChange={handleHeightChange} />
<Input id="height" type="number" placeholder="Auto" value={height} onChange={handleHeightChange} />
</div>
</div>
<div className="flex items-center space-x-2 pt-2">