Michael/Socialflow
1
0 Fork 0
mirror of https://github.com/R0m1k3/Socialflow.git synced 2026-10-12 01:36:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add more image editing filters and improve existing effects

Browse Source 
Enhance image editor with new filters (vibrance, hue, gamma, vignette, incognito, athena, audrey) and refine the vintage effect implementation using Cloudinary transformations.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/mIWJXC9
This commit is contained in:
michaelschal committed 2025-10-11 11:41:41 +00:00
1 parent 6954c6f5ad
commit 2bdb19b597
1 file changed
+109 -3
Download Patch File Download Diff File Expand all files Collapse all files
client/src/pages/image-editor.tsx
+109 -3
View File
@@ -43,7 +43,11 @@ interface Filters {
saturation: number;
blur: number;
sharpen: number;
effect: "none" | "grayscale" | "sepia" | "vintage";
vibrance: number;
hue: number;
gamma: number;
vignette: number;
effect: "none" | "grayscale" | "sepia" | "vintage" | "incognito" | "athena" | "audrey";
}
export default function ImageEditor() {
@@ -77,6 +81,10 @@ export default function ImageEditor() {
saturation: 0,
blur: 0,
sharpen: 0,
vibrance: 0,
hue: 0,
gamma: 0,
vignette: 0,
effect: "none"
});
@@ -200,8 +208,43 @@ export default function ImageEditor() {
if (filters.sharpen > 0) {
transformations.push(`e_sharpen:${filters.sharpen * 100}`);
}
if (filters.vibrance !== 0) {
transformations.push(`e_vibrance:${filters.vibrance}`);
}
if (filters.hue !== 0) {
transformations.push(`e_hue:${filters.hue}`);
}
if (filters.gamma !== 0) {
transformations.push(`e_gamma:${filters.gamma}`);
}
if (filters.vignette > 0) {
transformations.push(`e_vignette:${filters.vignette}`);
}
if (filters.effect !== "none") {
transformations.push(`e_${filters.effect}`);
// Map effects to proper Cloudinary transformations
switch(filters.effect) {
case "grayscale":
transformations.push("e_grayscale");
break;
case "sepia":
transformations.push("e_sepia");
break;
case "vintage":
// Vintage effect: combine sepia + vignette + reduced saturation
transformations.push("e_sepia:50");
transformations.push("e_vignette:30");
transformations.push("e_saturation:-20");
break;
case "incognito":
transformations.push("e_art:incognito");
break;
case "athena":
transformations.push("e_art:athena");
break;
case "audrey":
transformations.push("e_art:audrey");
break;
}
}
// Note: Ribbon and price badge overlays are rendered as CSS elements in preview
@@ -603,7 +646,67 @@ export default function ImageEditor() {
</div>
<div className="space-y-2">
<Label>Effet</Label>
<div className="flex justify-between">
<Label>Vibrance</Label>
<span className="text-sm text-muted-foreground">{filters.vibrance}</span>
</div>
<Slider
value={[filters.vibrance]}
onValueChange={([value]) => setFilters({ ...filters, vibrance: value })}
min={-100}
max={100}
step={10}
data-testid="slider-vibrance"
/>
</div>
<div className="space-y-2">
<div className="flex justify-between">
<Label>Teinte</Label>
<span className="text-sm text-muted-foreground">{filters.hue}°</span>
</div>
<Slider
value={[filters.hue]}
onValueChange={([value]) => setFilters({ ...filters, hue: value })}
min={-180}
max={180}
step={10}
data-testid="slider-hue"
/>
</div>
<div className="space-y-2">
<div className="flex justify-between">
<Label>Gamma</Label>
<span className="text-sm text-muted-foreground">{filters.gamma}</span>
</div>
<Slider
value={[filters.gamma]}
onValueChange={([value]) => setFilters({ ...filters, gamma: value })}
min={-50}
max={150}
step={10}
data-testid="slider-gamma"
/>
</div>
<div className="space-y-2">
<div className="flex justify-between">
<Label>Vignette</Label>
<span className="text-sm text-muted-foreground">{filters.vignette}</span>
</div>
<Slider
value={[filters.vignette]}
onValueChange={([value]) => setFilters({ ...filters, vignette: value })}
min={0}
max={100}
step={10}
data-testid="slider-vignette"
/>
</div>
<div className="space-y-2">
<Label>Effet artistique</Label>
<Select value={filters.effect} onValueChange={(value) => setFilters({ ...filters, effect: value as any })}>
<SelectTrigger data-testid="select-effect">
<SelectValue />
@@ -613,6 +716,9 @@ export default function ImageEditor() {
<SelectItem value="grayscale">Noir et blanc</SelectItem>
<SelectItem value="sepia">Sépia</SelectItem>
<SelectItem value="vintage">Vintage</SelectItem>
<SelectItem value="incognito">Incognito</SelectItem>
<SelectItem value="athena">Athena</SelectItem>
<SelectItem value="audrey">Audrey</SelectItem>
</SelectContent>
</Select>
</div>