Konva Tuvalde Brand Poster Editörü (1920×1080 Export)

Ne işe yarar (iş diliyle)

Tarayıcıda profesyonel bir görsel editör — drag/drop, transform, renk ve ağırlık değiştirme, gerçek zaman önizleme, tek tıkla yüksek çözünürlüklü PNG export. Designer ihtiyacı olmadan, bir saha operatörü brand-grade sosyal kartlar üretir. Çıktı kalitesi marka kontrolünden geçer çünkü tüm parametreler (font, palet, kasa) tasarım sistemi üzerinden kilitli.

Hangi müşteri/projelerde işe yarar

• Etkinlik posteri / sosyal kart üreten her marka (mevcut)
• Bayi / şube self-servis poster üretimi (merkez tema, bayi metni)
• HR / insan kaynakları çalışan tanıtım kartı (yüz fotoğrafı + meta + değer kelimeleri)
• Eğitim sertifika oluşturma platformu (yüzlerce katılımcıya seri üretim)
• Emlak ilan kart üretici (foto + meta + fiyat marka şablonunda)
• Influencer / ajans kampanya post üretici (ürün foto + slogan)

Nasıl çalışır (kısa, sade)

Konva Stage 1920×1080 viewBox üzerinde katmanlar açar: Background (gradient), Photo (kullanıcı yüklemesi + feather mask), ContourMask (foto kenar yumuşatma), WordCloud (yerleştirilen kelimeler), BottomBar (logolar), TransformerLayer (seçim/dönüşüm araçları), DebugLayer. Ekranda CSS scale ile küçülür ama çıktıda 1:1 render edilir. Drag / transform anında zustand store’a yazılır → re-render. Export tetiklenince scale 1’e döner, toDataURL({pixelRatio: 1}) → 1920×1080 PNG.

Olgunluk

canlida-kanitlanmis. Konva olgun bir tuval kütüphanesi; performans ağır kompozisyonlarda bile akıcı. Mobile editor erişilebilir ama küçük dokunmatikte ergonomi optimize değil — admin-desktop hedefli.

Teknik (geliştiriciler için)

• Kod: src/components/Canvas/PosterStage.tsx (Stage + scale + toolbar), src/components/Canvas/*Layer.tsx (BackgroundLayer, PhotoLayer, ContourMaskLayer, WordCloudLayer, BottomBar, TransformerLayer, DebugLayer, ContourEditorLayer), src/components/Canvas/WordQuickControls.tsx (per-word inline controls), src/lib/export.ts (PNG export).
• Tasarım tokens: src/lib/design-tokens.ts (ENERJISA_TOKENS.layout.canvas 1920×1080 sabit; cloudZone, photoZone, bottomBar, wordSize tek noktada).
• Export: Konva native toDataURL({pixelRatio: 1}). Export öncesi document.fonts.ready await edilir — yoksa Montserrat fallback’e düşer.
• Sınır: tek aspect (1920×1080). Başka format için tokens.layout.canvas parametrik hale getirilip per-format export config eklenmeli (Instagram Story 1080×1920, LinkedIn 1200×627 gibi).