diff --git a/attached_assets/image_1760181599555.png b/attached_assets/image_1760181599555.png new file mode 100644 index 0000000..3441ce1 Binary files /dev/null and b/attached_assets/image_1760181599555.png differ diff --git a/attached_assets/image_1760181687774.png b/attached_assets/image_1760181687774.png new file mode 100644 index 0000000..b471dac Binary files /dev/null and b/attached_assets/image_1760181687774.png differ diff --git a/client/src/pages/image-editor.tsx b/client/src/pages/image-editor.tsx index 9862398..095fea2 100644 --- a/client/src/pages/image-editor.tsx +++ b/client/src/pages/image-editor.tsx @@ -89,10 +89,6 @@ export default function ImageEditor() { const previewRef = useRef(null); const { toast } = useToast(); - // State for generated ribbon overlay - const [ribbonPublicId, setRibbonPublicId] = useState(null); - const [isGeneratingRibbon, setIsGeneratingRibbon] = useState(false); - // Save edited image mutation - DOM capture with html-to-image const saveImageMutation = useMutation({ mutationFn: async () => { @@ -159,34 +155,6 @@ export default function ImageEditor() { } }); - // Generate ribbon when settings change - useEffect(() => { - if (!ribbon.enabled || !ribbon.text) { - setRibbonPublicId(null); - return; - } - - const generateRibbon = async () => { - setIsGeneratingRibbon(true); - try { - const response = await apiRequest("POST", "/api/media/generate-ribbon", { - text: ribbon.text, - color: ribbon.color, - position: ribbon.position - }); - const data = await response.json(); - setRibbonPublicId(data.publicId); - } catch (error) { - console.error("Error generating ribbon:", error); - } finally { - setIsGeneratingRibbon(false); - } - }; - - // Debounce to avoid too many requests - const timer = setTimeout(generateRibbon, 500); - return () => clearTimeout(timer); - }, [ribbon.enabled, ribbon.text, ribbon.color, ribbon.position]); // Generate Cloudinary transformation URL useEffect(() => { @@ -537,13 +505,13 @@ export default function ImageEditor() {
@@ -701,7 +669,7 @@ export default function ImageEditor() { }`} style={{ fontSize: `${priceBadge.size}px` }} > - €{priceBadge.price} + {priceBadge.price}€ )} diff --git a/server/routes.ts b/server/routes.ts index 2edb427..ec4fd1d 100644 --- a/server/routes.ts +++ b/server/routes.ts @@ -1341,26 +1341,6 @@ export async function registerRoutes(app: Express): Promise { } }); - // Generate ribbon overlay - app.post("/api/media/generate-ribbon", requireAuth, async (req, res) => { - const { text, color, position } = req.body; - - if (!text || !color || !position) { - return res.status(400).json({ error: "Text, color and position are required" }); - } - - try { - const { RibbonGenerator } = await import("./services/ribbonGenerator"); - const generator = RibbonGenerator.getInstance(); - - const publicId = await generator.generateTriangularRibbon(text, color, position); - res.json({ publicId }); - } catch (error) { - console.error("Error generating ribbon:", error); - res.status(500).json({ error: "Failed to generate ribbon overlay" }); - } - }); - const httpServer = createServer(app); return httpServer; diff --git a/server/services/ribbonGenerator.ts b/server/services/ribbonGenerator.ts deleted file mode 100644 index ffac041..0000000 --- a/server/services/ribbonGenerator.ts +++ /dev/null @@ -1,87 +0,0 @@ -import { createCanvas } from "canvas"; -import cloudinary from "cloudinary"; - -export class RibbonGenerator { - private static instance: RibbonGenerator; - - static getInstance(): RibbonGenerator { - if (!RibbonGenerator.instance) { - RibbonGenerator.instance = new RibbonGenerator(); - } - return RibbonGenerator.instance; - } - - // Generate a triangular corner ribbon - async generateTriangularRibbon( - text: string, - color: "red" | "yellow", - position: "north_west" | "north_east" - ): Promise { - const width = 200; - const height = 200; - - const canvas = createCanvas(width, height); - const ctx = canvas.getContext("2d"); - - // Clear canvas with transparency - ctx.clearRect(0, 0, width, height); - - // Set ribbon color - const ribbonColor = color === "red" ? "#FF0000" : "#FFC107"; - ctx.fillStyle = ribbonColor; - - // Draw triangle based on position - ctx.beginPath(); - if (position === "north_west") { - // Triangle in top-left corner - ctx.moveTo(0, 0); - ctx.lineTo(150, 0); - ctx.lineTo(0, 150); - } else { - // Triangle in top-right corner - ctx.moveTo(width, 0); - ctx.lineTo(width - 150, 0); - ctx.lineTo(width, 150); - } - ctx.closePath(); - ctx.fill(); - - // Add text on the diagonal - ctx.save(); - ctx.fillStyle = "white"; - ctx.font = "bold 24px Arial"; - ctx.textAlign = "center"; - ctx.textBaseline = "middle"; - - if (position === "north_west") { - // Rotate for northwest corner - ctx.translate(50, 50); - ctx.rotate(-Math.PI / 4); - } else { - // Rotate for northeast corner - ctx.translate(width - 50, 50); - ctx.rotate(Math.PI / 4); - } - - ctx.fillText(text, 0, 0); - ctx.restore(); - - // Convert to base64 - const buffer = canvas.toBuffer("image/png"); - const base64 = `data:image/png;base64,${buffer.toString("base64")}`; - - // Upload to Cloudinary - try { - const result = await cloudinary.v2.uploader.upload(base64, { - folder: "ribbon-overlays", - public_id: `ribbon_${text}_${color}_${position}_${Date.now()}`, - resource_type: "image" - }); - - return result.public_id; - } catch (error) { - console.error("Error uploading ribbon to Cloudinary:", error); - throw error; - } - } -} \ No newline at end of file