Image Editor

A simple image editor component that allows you to apply various transformations to images. It supports rotation, flipping,

Image before editing

Image after editing

Edited Image

Installation

Install dependencies

1npm install pixel-craft --save

Copy the source code

components/ImageCompressor.tsx

1import React from 'react';
2
3interface Crop {
4  x: number;
5  y: number;
6  width: number;
7  height: number;
8}
9
10interface ImageEditorProps {
11  src: string;
12  rotate?: number;
13  flipHorizontal?: boolean;
14  flipVertical?: boolean;
15  colorOverlay?: string; // HEX with alpha, e.g., "#00000055"
16  crop?: Crop;
17  width?: number;
18  height?: number;
19}
20
21const ImageEditor: React.FC<ImageEditorProps> = ({
22  src,
23  rotate = 0,
24  flipHorizontal = false,
25  flipVertical = false,
26  colorOverlay,
27  crop = { x: 0, y: 0, width: 300, height: 300 },
28  width = 300,
29  height = 300,
30}) => {
31  const transform = 
32    rotate({rotate})
33    scaleX({flipHorizontal ? -1 : 1})
34    scaleY({flipVertical ? -1 : 1})
35  ;
36
37  const imageType = src.split('.').pop()?.toUpperCase() || 'Unknown';
38
39  return (
40    <div
41      style={{
42        width: crop.width,
43        height: crop.height,
44        overflow: 'hidden',
45        position: 'relative',
46        border: '1px solid #ddd',
47        display: 'inline-block',
48      }}
49    >
50      <div
51        style={{
52          transform,
53          position: 'absolute',
54          top: -crop.y,
55          left: -crop.x,
56        }}
57      >
58        <img
59          src={src}
60          alt="Edited"
61          width={width}
62          height={height}
63          style={{ display: 'block' }}
64        />
65      </div>
66
67      {colorOverlay && (
68        <div
69          style={{
70            backgroundColor: colorOverlay,
71            position: 'absolute',
72            top: 0,
73            left: 0,
74            width: crop.width,
75            height: crop.height,
76            pointerEvents: 'none',
77          }}
78        />
79      )}
80
81      <div
82        style={{
83          position: 'absolute',
84          bottom: 5,
85          right: 5,
86          background: 'rgba(0,0,0,0.5)',
87          color: 'white',
88          fontSize: 12,
89          padding: '2px 6px',
90          borderRadius: 4,
91        }}
92      >
93        {imageType} Format
94      </div>
95    </div>
96  );
97};
98
99export default ImageEditor;

Props

Prop name	Type	Default	Description
`src`	`string`	Required	The URL/path of the image to display.
`rotate`	`number`	0	Degrees to rotate the image (0-360).
`flipHorizontal`	`boolean`	false	If `true`) , flips the image horizontally (mirror).
`flipVertical`	`boolean`	false	If `true`) , flips the image vertically (upside down).
`colorOverlay`	`string`	undefined	A semi-transparent color overlay in HEX format with alpha (e.g., .`#00000055)`).
`crop`	`x: number; y: number; width: number; height: number;`	`x: 0, y: 0, width: 300, height: 300`	Defines a cropping rectangle within the image.
`width`	`number`	`"300"`	Rendered width of the full image before cropping.
`height`	`number`	`"300"`	Rendered height of the full image before cropping.

Possible Errors and User Measures

Error/ Issue	Cause	User's Measures/ Fixes
is invalid JavaScript	The `transform` string is incorrectly composed using invalid syntax	Fix the `transform` syntax by constructing it as a valid CSS string (see suggestions below)
Image not loading	Incorrect or inaccessible `src`	Ensure the image URL is valid and CORS-accessible if hosted externally
Crop values out of image bounds	Values for `x`, `y`, `width`, or `height` exceed image dimensions	Add validation or provide default safe values to avoid rendering artifacts
Overlay color is fully opaque	User sets a HEX color without alpha channel (e.g., `#000000`)	Recommend using RGBA or HEX with alpha (e.g., `#00000055`)
Image is distorted	`widht` and `height` props don’t match actual image aspect ratio )	Suggest maintaining aspect ratio or allow auto-sizing

Real World Uses

Use Case Description Image cropping and preview

Allow users to select a part of an image for avatars, thumbnails, or banners

Real-time image filter application

Combine cropping with overlays and transforms for editor-like interfaces

Content personalization

Dynamically rotate, flip, or recolor brand assets or templates

Online graphic tools

Enable lightweight editing (flip, rotate, overlay) without backend involvement

Optimization Techniques

Techniques	Benefits
Use WebP or AVIF formats	Smaller size with high quality—recommended for modern web usage
Compress image on upload	Prevent loading unnecessarily large images—combine with your `ImageCompressor` component
Cache processed images (if static)	Avoid recomputing filters every time using `canvas` or exporting
Lazy load images	Improves performance for pages with multiple image editors
Canvas rendering instead of `img` for processing	Offers better performance and flexibility for operations like cropping, flipping, and filters