Image Editing Studio
The Studio is Creativity Land's primary image-editing workspace. It provides image adjustments, filters, transformations, resizing, history controls, and PNG export.
Opening an Image
- Select Studio Preview.
- Upload an image using the file selector.
- Wait for the image to appear on the canvas.
- Adjust its appearance using the editing controls.
- Download the finished image.
Once an image is loaded, the interface displays its dimensions and editing controls.
Image Adjustments
| Adjustment | Range | Default | Purpose |
|---|---|---|---|
| Brightness | -100 to 100 | 0 | Lighten or darken the image |
| Contrast | -100 to 100 | 0 | Increase or decrease tonal contrast |
| Saturation | -100 to 200 | 0 | Adjust color intensity |
| Hue Rotate | -180° to 180° | 0° | Shift image colors around the hue spectrum |
| Blur | 0 to 8 | 0 | Apply a blur effect |
Adjustments update the image preview as their values change.
Brightness
Increase brightness to lighten an image or decrease it to make the image darker.
Contrast
Increase contrast to emphasize differences between light and dark regions.
Decrease contrast for a flatter tonal appearance.
Saturation
Positive values increase color intensity.
A value of -100 removes color saturation.
Hue Rotation
Hue rotation shifts the image's colors around the color wheel.
It is useful for creative color effects and stylistic experimentation.
Blur
Blur softens image details.
The control ranges from 0 to 8 in the supplied implementation.
Filter Buttons
The Studio includes:
| Filter | Implemented Behavior |
|---|---|
| Grayscale | Sets saturation to -100 and hue to 0 |
| Sepia | Sets saturation to 10 and hue rotation to 18 |
| Invert | Sets hue rotation to 180 |
| Sharpen | Sets contrast to 20 |
These buttons update the adjustment parameters. They are not independent implementations of every named image-processing algorithm.
For example, the Sharpen button changes contrast rather than applying a convolution-based sharpening kernel.
Clearing Adjustments
Click Clear to restore the adjustment values to their defaults.
The control clears the current brightness, contrast, saturation, hue, and blur settings.
It does not necessarily restore prior pixel-level transformations such as rotation or resizing.
Canvas View Controls
The Studio includes two view options:
Fit
Scales the image to fit within the available preview area while preserving its aspect ratio.
100%
Displays the image at its natural dimensions within the canvas viewport.
Large images may extend beyond the visible preview area.
These controls affect the preview rather than resampling the source image.
Rotation
Available actions:
- Rotate -90° — Rotate counterclockwise
- Rotate +90° — Rotate clockwise
Rotation updates the image data.
For 90-degree rotations, image width and height are exchanged.
Flipping
Flip H
Mirrors the image horizontally.
Flip V
Mirrors the image vertically.
These transformations operate on the current image.
Resizing
The Resize section contains:
| Control | Purpose |
|---|---|
| Width | Set output width |
| Height | Set output height |
| Lock aspect | Keep width and height proportional |
| Apply Resize | Resample to the entered dimensions |
| Reset Size | Reload the original image dimensions |
Usage
- Enter the desired width or height.
- Leave Lock aspect enabled to preserve proportions.
- Click Apply Resize.
- Review the resulting image.
Resizing changes the underlying image dimensions, unlike Fit and 100%.
Reset Size
The supplied implementation reloads the originally uploaded image when Reset Size is used.
This can discard subsequent pixel-level modifications.
History
The Studio provides Undo and Redo controls.
| Control | Label |
|---|---|
| Undo | Undo (Z) |
| Redo | Redo (Shift+Z) |
The implementation stores a limited history of image snapshots for selected committed operations, with a history limit of 30 entries.
Not all live adjustment changes are stored as separate history snapshots.
Exporting
Click Download to export the edited image.
| Setting | Value |
|---|---|
| Format | PNG |
| Filename | edited-image.png |
| Output dimensions | Current image dimensions |
| Adjustments | Applied during output rendering |
The resulting PNG is generated through the browser's Canvas API.
Recommended Workflow
- Upload your image.
- Adjust exposure, contrast, and saturation.
- Apply any creative filter presets.
- Rotate, flip, or resize if necessary.
- Use background or transparency tools if needed.
- Review the preview.
- Download the edited PNG.
Important: Keep a copy of the original image. Undo history is limited and should not be treated as permanent project storage.
Updated 9 days ago