How to Use: Easy Image Editor

Welcome to Easy Image Editor! This guide will walk you through all the features of the application, from loading your first image to saving your final creation.

A Quick Note Before You Start

• This is a light editor tool: It's designed to demonstrate what's possible in a web browser, not to replace professional software like Photoshop.

• Performance: Because this is a web app, some operations might take a moment to process, especially on very large images.

The Main Interface

The editor is divided into three main parts:

• The Header (Top): This is where you load, save, zoom, undo, and redo actions.

• The Canvas (Center): This is your main workspace where your image is displayed.

• The Controls Panel (Right): This sidebar contains all the powerful tools to edit your image.

Getting Started

Loading an Image

1. Click the Load Image button in the top right.

2. Select an image file from your computer. The editor supports common formats like JPG, PNG, WEBP, GIF, BMP, TIFF, and even single pages from a PDF.

3. If you load a PDF with multiple pages, a dialog will appear asking you to enter the page number you want to edit.

Zooming

Use the Zoom slider in the header to zoom in and out of your image for a closer look. This does not change the size of your actual image.

Saving Your Work

1. Choose your desired format (PNG, JPG, WEBP, or PDF) from the dropdown menu next to the "Save" button.

2. Click the Save Image button.

3. A dialog will appear. Enter a name for your file and click Save. The file will be downloaded by your browser.

Undo / Redo

In the header, you will find Undo and Redo buttons. These allow you to step backward and forward through your changes. The editor keeps a history of your last 20 major actions, including:

• Retouching & Drawing strokes

• Crop, Resize, Rotate & Flip

• Applying filters to a selection

The buttons will become active whenever there is an action to undo or redo.

Editing Your Image: The Controls Panel

All editing tools are found in the right-hand panel.

Canvas Actions

This section contains tools that permanently change the image's dimensions or orientation. All these actions can be undone.

• Crop:

  1. Click the Crop button. A cropping box will appear on your image.

  2. Drag the corners and edges of the box to select the area you want to keep.

  3. Click Apply Crop to confirm, or Cancel to go back.

• Rotate & Flip:

  1. Click -90° or +90° to rotate the image.

  2. Enter a specific number (e.g., 45) into the text box and click Apply Rotation for custom angles.

  3. Click H or V to flip the image horizontally or vertically.

• Resize (Scale):

  1. Drag the Scale slider to choose a new size (as a percentage of the current size). The new pixel dimensions are displayed below the slider.

  2. Click the Apply Resize button to make the change permanent.

Selection Tools

Use this to apply filters and adjustments to only a part of your image.

1. Click the Select Area button. Your cursor will turn into a crosshair.

2. Click and drag on the image to draw a selection box.

3. To select multiple areas, hold down the Shift key while you draw additional boxes.

4. Once an area is selected, a new set of options appears:

   • Invert Mask: Check this box to apply filters to everything except your selected area(s).

   • Apply Filters to Selection: After you've made adjustments with the sliders below, click this button to "bake" them into the selected area. This action can be undone.

   • Deselect: Click this to remove all selection boxes.

Retouch

This section contains the powerful Clone Brush tool, perfect for removing blemishes or duplicating parts of your image.

1. Click the Clone Brush button to activate the tool.

2. Adjust the Brush Size and Brush Smoothness (feathering) using the sliders.

3. Hold down Alt (or Option on Mac) and click on the part of the image you want to copy from. This sets your source point.

4. Release the Alt/Option key, then click and paint over the area you want to cover.

5. Each brush stroke (from mouse down to mouse up) is a separate step in the undo/redo history.

Drawing Tools

Add shapes and lines to your image.

1. First, choose your Line Color and Line Thickness.

2. Click one of the tool buttons: Add Rectangle, Add Line, or Add Arrow.

3. Click and drag on the image to draw your shape. The shape will be permanently added to the image when you release the mouse button.

4. Each shape you draw is a separate step in the undo/redo history.

Metadata (EXIF)

This section allows you to view and edit the metadata embedded in your image file (for JPEGs).

• Click the Metadata title to expand or collapse the panel.

• You can type in any of the fields to edit the values.

• Important Note: Due to browser limitations, any changes you make to the metadata are for viewing purposes only and will not be saved when you export the image.

Filters & Adjustments

These tools let you fine-tune the look and feel of your image. Remember: if you have an active selection, these changes will only appear inside that area until you click "Apply Filters to Selection".

• Quick Filters:

  • Greyscale: Removes all color from the image.

  • Invert: Inverts the colors, like a photo negative.

  • Reset All Adjustments: A very handy button to reset all sliders and filters back to their default values.

• Sliders: Simply drag any of the sliders to see a live preview of the effect.

  • Exposure: Brightness, Contrast, Highlights, Shadows, White Point, Black Point.

  • Color & Effects: Saturation (color intensity), Warmth (color temperature), Sharpness, Blur, Pixelate, and Vignette (darkens the corners).

Have fun!