Image Editor

A powerful web-based image editing tool that allows users to manipulate images and add text overlays directly in the browser. Create stunning compositions with ease!

🚀 Features

• 📸 Upload and edit images
• 📷 Capture photos using device camera
• 🖋 Add and customize text overlays
• 🔄 Resize, rotate, and reposition elements
• 🎨 Adjust text properties (font, size, color, outline, shadow)
• 📚 Layer management (move elements up/down, delete)
• 💾 Download the final composition as a PNG file
• 🖼️ Automatic transparent edge cropping for uploaded PNG images
• 🔍 Smart canvas resizing for optimal viewing

🛠 Technologies Used

• HTML5 Canvas for rendering
• JavaScript (ES6+) for functionality
• Tailwind CSS for styling
• Bootstrap Icons for UI elements

🏁 Getting Started

1. Clone the repository:

   git clone https://github.com/oakmgt/image-editor.git

2. Navigate to the project directory:

   cd image-editor

3. Open index.html in a modern web browser.

4. Start editing images and creating amazing compositions!

🖥 Usage

1. Adding Images:

   • Click the "Add Image" button, drag and drop an image onto the canvas, or use the camera button to capture a photo.

2. Adding Text:

   • Click the "Add Text" button to add text elements to your composition.

3. Editing Elements:

   • Select elements to resize, rotate, or reposition them.
   • For text elements, adjust properties using the controls that appear when selected.

4. Managing Layers:

   • Use the layer controls to change the stacking order of elements or delete them.

5. Saving Your Work:

   • Click the download button to save your composition as a PNG file. The final image will be automatically cropped to remove unnecessary transparent edges.

🤝 Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📜 License

This project is licensed under the AGPL v3 License. See the LICENSE file for details.

👨‍💻 Author

Koen van Eijk

• GitHub: @koenvaneijk
• Website: koenvaneijk.com
• X: koenvaneijk

🙏 Acknowledgments

• Tailwind CSS for the awesome utility-first CSS framework
• Bootstrap Icons for the beautiful icon set

📊 Project Status

This project is actively maintained. If you encounter any issues or have suggestions for improvements, please open an issue on GitHub.

🔒 Privacy and Terms

This project respects your privacy and adheres to specific terms of service. For more information, please visit:

• Privacy Policy
• Terms of Service

Powered by OAK MGT