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

[dyad] Added quality settings panel - wrote 1 file(s)

Browse Source
This commit is contained in:
[dyad]
2026-01-18 11:23:09 +01:00
parent ac226f8074
commit e12f4569be
1 changed files with 49 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -30,6 +30,7 @@ import {
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
import { Slider } from "@/components/ui/slider";
export function ImageConverter() {
const [images, setImages] = useState<File[]>([]);
@@ -38,6 +39,7 @@ export function ImageConverter() {
const [width, setWidth] = useState<number | string>("");
const [height, setHeight] = useState<number | string>("");
const [format, setFormat] = useState<"png" | "jpeg" | "webp">("png");
const [quality, setQuality] = useState<number>(80);
const [prefix, setPrefix] = useState<string>("");
const [suffix, setSuffix] = useState<string>("");
@@ -168,7 +170,8 @@ export function ImageConverter() {
if (ctx) {
ctx.drawImage(img, 0, 0, Number(width), Number(height));
const dataUrl = canvas.toDataURL(`image/${format}`);
const mimeType = `image/${format}`;
const dataUrl = canvas.toDataURL(mimeType, format === 'png' ? undefined : quality / 100);
const link = document.createElement("a");
link.href = dataUrl;
const finalFilename = generateFinalFilename(index);
@@ -213,7 +216,7 @@ export function ImageConverter() {
<div className="text-left">
<CardTitle>Image Settings</CardTitle>
<CardDescription className="mt-1">
Adjust resolution and format for all uploaded images.
Adjust resolution for all uploaded images.
</CardDescription>
</div>
</AccordionTrigger>
@@ -229,17 +232,6 @@ export function ImageConverter() {
<Input id="height" type="number" placeholder="e.g., 1080" value={height} onChange={(e) => setHeight(e.target.value)} />
</div>
</div>
<div className="space-y-2">
<Label htmlFor="format">Format</Label>
<Select value={format} onValueChange={(value: "png" | "jpeg" | "webp") => setFormat(value)}>
<SelectTrigger id="format"><SelectValue placeholder="Select format" /></SelectTrigger>
<SelectContent>
<SelectItem value="png">PNG</SelectItem>
<SelectItem value="jpeg">JPEG</SelectItem>
<SelectItem value="webp">WEBP</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<CardFooter className="px-0 pt-6 pb-0 flex justify-between">
<Button variant="outline" onClick={() => fileInputRef.current?.click()}><Upload className="mr-2 h-4 w-4" />Upload</Button>
@@ -302,6 +294,50 @@ export function ImageConverter() {
</AccordionContent>
</AccordionItem>
</Card>
<Card>
<AccordionItem value="quality-settings" className="border-none">
<AccordionTrigger className="p-6 hover:no-underline">
<div className="text-left">
<CardTitle>Quality Settings</CardTitle>
<CardDescription className="mt-1">Choose format and compression level.</CardDescription>
</div>
</AccordionTrigger>
<AccordionContent className="px-6 pb-6">
<div className="space-y-6">
<div className="space-y-2">
<Label htmlFor="format">Format</Label>
<Select value={format} onValueChange={(value: "png" | "jpeg" | "webp") => setFormat(value)}>
<SelectTrigger id="format"><SelectValue placeholder="Select format" /></SelectTrigger>
<SelectContent>
<SelectItem value="png">PNG</SelectItem>
<SelectItem value="jpeg">JPEG</SelectItem>
<SelectItem value="webp">WEBP</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<div className="flex justify-between items-center">
<Label htmlFor="quality">Quality</Label>
<span className="text-sm text-muted-foreground">{quality}%</span>
</div>
<Slider
id="quality"
min={0}
max={100}
step={1}
value={[quality]}
onValueChange={(value) => setQuality(value[0])}
disabled={format === 'png'}
/>
{format === 'png' && (
<p className="text-xs text-muted-foreground pt-1">Quality slider is disabled for PNG (lossless format).</p>
)}
</div>
</div>
</AccordionContent>
</AccordionItem>
</Card>
</Accordion>
</div>