Lightweight Web Photo Editor

Lightweight Photo Editor is an online image editing utility providing practical, rapid editing tools directly inside the web browser without demanding heavy desktop software.
This served as my onboarding starter project at True Platform, designed to evaluate and integrate Fabric.js into the company's proprietary front-end web framework.

• Designed the core state management and canvas interaction architecture.
• Integrated Fabric.js with native HTML5 Canvas for fast rendering performance.
• Engineered user experience features: 20-step undo/redo stack, object layer locking, and custom transforms.
• Authored the user interface strictly using HTML, CSS, and Vanilla JS/jQuery without relying on third-party UI component libraries.

• Crop with predefined aspect ratios (square, circular, horizontal banner, avatar) or freeform manual drag.

• Smooth freehand sketching with customizable brush widths, opacity, and color palettes.

• Add text overlays with font choices, sizing, alignment, and styling.
• Insert vector shapes (rectangles, ellipses, triangles) with stroke or solid fill.

• Arbitrary degree rotation, horizontal flip, and vertical reflection.

• Apply pixelation mosaic masks to censor sensitive regions or personal identifiable information.

• Quick arrow callout tool for annotating screenshots and highlighting workflow steps.

• Snapshot state tracking using dedicated undo and redo memory stacks.
• Capped at 20 historical states to avoid memory leaks on large high-resolution images.

• Tree view of all objects rendered on canvas with one-click selection, z-ordering, and locking.

• Framework: In-house proprietary PHP framework, Vanilla JavaScript, jQuery.
• Canvas Rendering Engine: Fabric.js on top of HTML5 Canvas.
• Styling: Custom CSS without heavy external CSS frameworks.