Add image cropping/resizing/basic editing tool

[zzxoto]

What feature or new tool do you think should be added to DevToys?

Add image cropping/resizing/basic editing tool

Why do you think this is needed?

Add image cropping/resizing/basic editing tool

Solution/Idea

Add image cropping/resizing/basic editing tool

Comments

No response

[yuvashrikarunakaran]

Why It's Needed
Streamlined Workflow

Developers often need to quickly resize or crop images for testing, documentation, or embedding in projects. Switching to external tools for basic edits interrupts productivity.
Convenience

A built-in editor provides an offline, lightweight alternative to full-fledged editing software, catering to quick adjustments without leaving the DevToys environment.
Versatility

This tool complements existing features like the image compressor, making DevToys more comprehensive for handling image-related tasks.
Proposed Features
Image Cropping

Freeform cropping and fixed aspect ratios (e.g., 1:1, 16:9, 4:3).
Drag-and-resize crop area with real-time previews.
Image Resizing

Pixel-based or percentage-based resizing.
Option to maintain aspect ratio.
Support for downscaling and upscaling with smoothing options.
Basic Editing Tools

Rotation: 90°, 180°, or custom angles.
Flipping: Horizontal and vertical.
Brightness/Contrast Adjustments: Simple sliders for quick tweaks.
Format Conversion

Export to common formats like PNG, JPEG, WebP, or BMP.
Adjustable quality settings for lossy formats.
Batch Processing

Support for cropping or resizing multiple images simultaneously.
Drag-and-Drop Support

Allow users to drag images directly into the tool for editing.
Real-Time Preview

Display output previews after edits are applied.
Presets for Developers

Include common dimensions for app icons, banners, or thumbnails.
Potential Workflow
Load Image: Drag-and-drop or browse to select an image.
Edit: Use cropping, resizing, or adjustment tools in an intuitive interface.
Preview: See a live preview of the result.
Export: Save the edited image with desired format and quality settings.
Implementation Thoughts
Use lightweight libraries like Sharp (for Node.js) or ImageSharp (for .NET) to handle image processing efficiently.
Provide an intuitive and responsive UI similar to existing DevToys tools.

[zzxoto]

@yuvashrikarunakaran Thanks for the details.