This personal project demonstrates the implementation of the chroma key compositing technique, commonly known as the green screen effect, using the trio of foundational web technologies: HTML, CSS, and JavaScript. The application allows users to seamlessly integrate two images by replacing a uniformly green background with a selected scene or pattern, exemplifying a simplified version of the visual effects used in film and photography.
- Green Screen Effect: Replace the green background of an image with another image of your choice.
- Interactive Interface: User-friendly design for easy navigation and operation.
- Real-Time Preview: Instantly view the composited result as you select different backgrounds.
- Customization: Adjust the green threshold to fine-tune the chroma key effect.
- HTML: Structuring and presenting content on the web page.
- CSS: Styling the user interface with responsive design.
- JavaScript: Enabling interactive features and image processing logic.
To run this project locally, follow these simple steps:
- Clone the repository to your local machine using the following command:git clone https://github.com/akhilpsin/Green-screen-effect.git
- Navigate to the project directory: cd GreenScreenProblem
- Open the
index.htmlfile in your web browser.
- Upload an image with a green background using the provided file input control.
- Select a new background image that you would like to composite onto the original image.
- Adjust the green threshold if necessary to achieve the best compositing result.
- View the composited image in the preview area.
Contributions to enhance this project are welcome. If you have a suggestion that would improve it, please fork the repository and create a pull request. You can also simply open an issue with the tag "enhancement".
This project is open-source.
- Special thanks to everyone who has provided feedback and suggestions to improve this project.
- Credits to the developers and contributors of any third-party libraries or tools used.
If you have any questions or would like to get in touch, please feel free to contact me at akhilpsinbox@gmail.com.