Build with ❤️ by VIKAS PANDEY
Explore the docs »
View Demo
.
Report Bug
.
Request Feature
- About the Project
- Features
- How to Use
- Tech Stack
- Getting Started
- Files Description
- Contributing
- Need Help
X-tremeEdit is an online photo editor designed for everyday users. With features such as brightness adjustment, saturation control, inversion, grayscale, rotation, and flip, X-tremeEdit makes it easy to enhance and personalize your photos. And with the ability to download your edited images, sharing your creations with friends and family has never been easier. X-tremeEdit is the perfect solution for anyone looking to elevate their day-to-day photo editing.
- Brightness adjustment
- Saturation control
- Inversion
- Grayscale
- Rotation
- Flip
- Download edited images
- Visit https://x-treme-edit.vercel.app/
- Upload an image from your device
- Edit your image using the various features provided
- Download your edited image or share it with friends and family
- HTML
- CSS
- Javacript
➤ Clone the repository
git clone https://github.com/iamprofessor1/X-tremeEdit.git➤ Open the index.html in web browser
The index.html is an HTML file with CSS and JavaScript, which represents a web page for a photo editor called "X-tremeEdit". The web page has a header that includes links to various stylesheets, icon libraries and a favicon. In the body of the page, there is a container element with the editor interface. The editor interface consists of several sections: Filters section, which contains buttons for adjusting the brightness, saturation, inversion, and grayscale of an image Rotate & Flip section, which contains buttons for rotating and flipping the image Preview-img section, which displays the image Controls section, which contains buttons for resetting filters, choosing an image, and downloading the image. The file also uses JavaScript to implement the functionality of the photo editor. The functionality includes previewing an image, applying filters, rotating and flipping the image, and downloading the image.
This is a CSS file that sets the styles for a web page. It imports the Poppins font from Google fonts API, sets default styles for all elements, styles the body of the page to have a minimum height of 100vh, and display as a flex container that centers its children both horizontally and vertically. The .container class sets the width, padding, background color, border radius, and box shadow for an element with class .container. The .container.disable class sets the opacity and pointer-events for elements with .editor-panel, .reset-filter and .download-img classes. The h2 elements inside .container have a font-size of 22px and font-weight of 500. The .wrapper class is used to wrap the editor-panel and preview-img and is set to display as a flex container with a minimum height of 335px. The .editor-panel class sets the padding, width, border-radius, and border for elements with class .editor-panel. The .title class sets a font-size of 16px for its text block. The .options and .controls classes have their display set to flex and their children to have equal spacing between them. The button elements have styles for their outline, height, font-size, color, background, border-radius, margin-bottom, and border. The .filter button has a width set to be half the parent width minus 4px. The .slider class has a margin-top of 12px and .filter-info sets the display, color, and font-size for its elements. The .rotate class has a margin-top of 17px and sets styles for its button elements. The .preview-img class sets styles for its child image element, including max-width and max-height. The .controls class sets styles for its button elements, including padding, font-size, border-radius, color, and cursor. The .reset-filter button has styles for its color, border, margin, and border-radius.
The code defines a web page for applying filters to an image. It uses JavaScript to manipulate the image and handle user interaction with the page. The page has various buttons and a slider that allow the user to apply different filters, rotate the image, flip the image, and reset the applied filters. The code uses the HTML5 canvas API to create a canvas element, draw the image on it, and apply the filters. When the user clicks the "Download Image" button, the code creates a new image file with the filters applied.
Contributions are always welcome! If you have any ideas or suggestions, feel free to open an issue or a pull request.
if (youEnjoyed) {
starThisRepository();
}