Meme Creator Web Application
This project is a simple web-based meme creator that allows users to upload an image, add custom text, and download the final meme. The application uses HTML, CSS, and JavaScript to implement core functionalities.
Features • Image Upload: Upload an image from your device to use as the base for your meme. • Add Text: Add draggable and editable text boxes to overlay text on the image. • Download Meme: Download the final meme as a PNG file. • Canvas Preview: View the meme in a canvas before downloading it.
Technologies Used • HTML5: For structuring the application. • CSS3: For styling the canvas and text boxes. • JavaScript: For handling image uploads, text overlays, and drag-and-drop functionality.
How to Use 1. Open the application in a browser. 2. Click the “Upload Image” button to select an image from your device. 3. Use the “Add Text” button to create editable text boxes. Drag and position the text boxes as desired. 4. Click the “Download Meme” button to save your final meme as a PNG file.
Known Limitations 1. Mobile Responsiveness: • The current version is not optimized for mobile devices. Features such as drag-and-drop and canvas resizing may not work properly on smaller screens. • If you experience layout or usability issues on mobile, use the application on a desktop browser for the best experience. 2. Canvas Resizing: • Resizing the browser window after uploading an image may cause the canvas to not render the image properly. 3. Text Editing: • Text boxes may not resize dynamically based on their content, so you may need to manually adjust the text.
Future Enhancements
The following improvements are planned for future versions: • Mobile Compatibility: Fully responsive design with proper touch support for drag-and-drop functionality on mobile devices. • Dynamic Canvas Resizing: Automatic adjustment of canvas and text boxes when resizing the browser window. • Advanced Text Styling: Support for font styles, colors, and sizes.