A responsive Single Page Application (SPA) for slicing, designing, and exporting images and PDFs across A3 and A4 paper formats for large-scale poster and mural printing.
In institutional and educational settings (such as schools, administrative departments, and event coordination teams), producing large-format posters, wall displays, and informational murals (often exceeding 1 meter in width) is a frequent necessity.
However, standard office printers are strictly limited to standard A4 or A3 paper sizes.
- Error-Prone Manual Process: Without specialized tools, teams attempted to slice images "by eye" using generic photo editors or manual measurements.
- Resource & Financial Waste: Misaligned prints led to direct waste of paper, toner/ink, and valuable staff hours.
- Visual Inconsistencies: Distorted proportions, uneven overlaps, and misaligned cut margins compromised final wall mounting.
A3/A4 Poster Slicer is a lightweight, free, and intuitive Single Page Application (SPA) engineered to remove the need for complex, expensive desktop graphic software (such as Photoshop or CorelDRAW) by solving the problem directly in the browser.
Users can import images or multi-page PDFs, configure an interactive grid in real time, customize visual elements, and export print-ready, sequentially ordered files in seconds.
- Standard Paper Sizes: Complete support for A3 and A4 standards in Portrait and Landscape orientations.
- Dynamic Grid Controls: Fluid row and column count adjustment via real-time sliders.
- Real-World Dimension Calculation: Automatically calculates and displays real physical dimensions in centimeters (e.g.,
120 cm × 80 cm), eliminating manual ruler math.
- Client-side PDF ingestion directly in the browser without server uploads.
- Auto-Distribution: Automatically calculates optimal grid arrangements and distributes multi-page PDF documents across corresponding grid cells.
- Single-Page Selector: High-definition rendering of individual selected pages directly onto the canvas.
- Rich-Text Editing: On-demand loading of 20+ Google Fonts, letter spacing, sizing, alignment, and color palette customizer.
- Vector Shapes Library: Built-in primitives including rectangles, circles, triangles, stars, hearts, pentagons, and speech bubbles.
- Image Cropping: Integrated cropping tool powered by
Cropper.jsfor lossless image adjustments prior to placement. - Layer Hierarchy: Z-index stack management (bring forward, send backward, bring to front, send to back).
- Intuitive Pinch-to-Zoom and Two-Finger Pan (Hand mode) touch gestures.
- Touch-optimized interface featuring draggable bottom-sheets for mobile editing workflows.
- Full adherence to iOS viewport guidelines (
env(safe-area-inset-top/bottom)) and dynamic viewport height (100dvh).
- Single Compiled PDF: Generates a unified multi-page PDF with all grid pages sequentially ordered for printing.
- ZIP Archive Packaging: Batch export individual high-resolution JPG images or standalone single-page PDFs.
- Editable JSON Projects: Save and reload complete project states (layers, fonts, and grid geometry) for future editing.
- State Management: Complete Undo/Redo history stack (Ctrl+Z / Ctrl+Y), keyboard shortcuts, and direct Clipboard paste (Ctrl+V).
- 👥 Operational Adoption: Established as the standard layout tool by 50+ staff members across schools, secretariats, and pedagogical teams.
- ⏱️ Time Efficiency: Slashed mural layout preparation from hours of trial and error to just a few minutes.
- ♻️ Sustainability & Cost Savings: Eliminated wasted print runs caused by incorrect scaling, cut lines, or misaligned margins.
- 💡 Staff Autonomy: Empowered non-technical staff to create high-impact, professional large-format materials independently.
The application was built with a strict focus on high performance and zero build/bundling overhead, allowing instant static hosting on any CDN.
| Category | Technologies / Libraries |
|---|---|
| Core Frontend | Semantic HTML5, Vanilla CSS3 (Custom Properties / Design Tokens), Modular JavaScript (ES6+) |
| Canvas Graphics Engine | Fabric.js 5.3.1 (2D Canvas manipulation & interactive object model) |
| PDF Processing | PDF.js 3.4.120 (Client-side render) & jsPDF 2.5.1 (PDF generation) |
| Utilities & Export | Cropper.js (Crop), Hammer.js (Touch Gestures), JSZip (ZIP Packaging), FileSaver.js |
| Typography & Icons | Google Fonts (WebFont Loader) & Material Icons Round |
| Deployment & CI/CD | GitHub, Vercel (Automatic Deployments) |
This project served as a practical testbed for AI-assisted Software Engineering.
Moving beyond generic chatbot usage, development leveraged IDE and CLI workflows, disciplined architectural mapping (ARCHITECTURE.md), and structured system contexts to accelerate delivery while ensuring clean code quality.
- State & Memory Modeling: Structured Undo/Redo serialization while preserving background/grid lock metadata and Fabric.js canvas state.
- Touch Event Coordination: Resolved event collision between native mobile page scrolling (
touch-action) and multi-touch canvas manipulation. - Zero-Bundler Modular Architecture: Maintained strict modular separation and dependency ordering in pure JavaScript for near-instant cold loads without Webpack or Vite.
.
├── css/
│ ├── components.css # Component styles (Modals, Draggable Sheets, Floating Buttons)
│ ├── layout.css # Structural layout (Header, Canvas Wrapper, Toolbar, Mode Toggle)
│ └── variables.css # Design tokens, CSS variables (:root), and global resets
├── js/
│ ├── app.js # Main application bootstrap (window.onload & lifecycle init)
│ ├── canvas.js # Fabric.js engine, custom controls, grid renderers, and history
│ ├── config.js # Constants, paper dimensions, global state, and SVG paths
│ ├── export.js # PDF, JPG, and ZIP export pipelines & JSON project serialization
│ ├── pdf.js # Multi-page PDF parsing, page picker, and auto-grid distributor
│ ├── shapes.js # Vector shapes factory, text handling, typography, and crop
│ └── ui.js # UI controllers, keyboard shortcuts, drag & drop, clipboard
├── ARCHITECTURE.md # Detailed system architecture document
├── LICENSE # GNU GPL v3.0 license terms
├── README.md # English documentation
├── README.pt-BR.md # Portuguese documentation
├── index.html # SPA entry point (compatible with Vercel & GitHub Pages)
└── vercel.json # Vercel deployment and routing configuration
Because this is a 100% static client-side web application, no backend dependencies or build steps (npm install or npm run build) are required.
-
Clone the repository:
git clone https://github.com/lucasresendev/app-recorte-cartazes.git cd app-recorte-cartazes -
Open the application:
- Open
index.htmldirectly in any modern web browser. - Or run any local static HTTP server of your choice (e.g., VS Code Live Server extension or
npx serve .).
- Open
Software Developer & Systems Analysis and Development Student (Fatec Taubaté)
"I don't see code as an end in itself, but as a tool to break down needs and craft meaningful solutions."
This project is free software licensed under the GNU General Public License v3.0 (GPL-3.0).
- Freedom to use and modify: Anyone is free to run, study, modify, and distribute this software.
- Copyleft (Reciprocal License): If you modify or build a derivative work based on this codebase, you must also distribute your modifications openly under the exact same GPL-3.0 license, ensuring the community continues to benefit.
See the LICENSE file for the full license text.