Maendeleo_Badge_Generator
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Viewing readonly version of main branch: v6View latest version
A mobile-friendly web application that allows users to create custom badges by uploading their photos and placing them in a circular frame over a background image.
- Upload a photo (e.g., a face)
- Display the uploaded photo in a circular frame
- Automatically place the circular photo over a background image
- Show a live preview of the final badge
- Download the final composed image as a PNG
- Built with HTML, CSS, and JavaScript
- Uses HTML5 Canvas API for image composition
- Mobile-responsive design
- Served via Hono framework on Val Town
- Visit the application URL
- Click "Upload Your Photo" and select an image from your device
- See the live preview of your badge with your photo in a circular frame
- Click "Download Badge" to save the final image as a PNG
- The circular image is centered at 320px from the top and horizontally centered
- The background image is fixed and provided by the application
- The canvas element is hidden and only used for generating the downloadable image