44 | {!selectedImage && !editedImage && (
45 |
123 | );
124 | }
125 |
126 | export default App;
--------------------------------------------------------------------------------
/src/components/Button.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { clsx } from 'clsx';
3 |
4 | interface ButtonProps extends React.ButtonHTMLAttributes
46 |
86 | )}
87 |
88 | {selectedImage && (
89 | Filter
47 |
48 |
53 | 49 | A powerful, web-based image editor with an intuitive interface for quick edits and filters. Local and privacy-friendly. 50 |
51 |
54 |
85 |
55 | 
56 | 🖼️ Intuitive Editing
57 |
59 |
56 | 🖼️ Intuitive Editing
57 | Easy-to-use interface for basic and advanced modifications
58 |
60 | 
61 | ⚡ Fab Filters
62 |
64 |
61 | ⚡ Fab Filters
62 | Full of beautiful filters to make your photos stand out
63 |
65 | 
66 | 🎨 Rich Tools
67 |
69 |
66 | 🎨 Rich Tools
67 | Crop, rotate, adjust, and more
68 |
70 | 
71 | 📱 Mobile-Optimized
72 |
74 |
71 | 📱 Mobile-Optimized
72 | Fully responsive design that works on all devices
73 |
75 | 
76 | 💄 Fine-tuning
77 |
79 |
76 | 💄 Fine-tuning
77 | Brightness, Contrast, HSV and more.
78 |
80 | 
81 | 🎯 Preset Crops
82 |
84 |
81 | 🎯 Preset Crops
82 | Common aspect ratios for social media and web
83 |
90 |
96 | )}
97 |
98 | {editedImage && !selectedImage && (
99 |
100 |
118 | )}
119 |
122 |
101 | 
106 |
112 |
107 |
110 |
111 |
113 |
116 |
117 |
20 | {
24 | onSave(editedImageObject.imageBase64);
25 | }}
26 | onClose={onClose}
27 | defaultTabId={TABS.ADJUST}
28 | defaultToolId={TOOLS.CROP}
29 | savingPixelRatio={2}
30 | previewPixelRatio={2}
31 | />
32 |
33 | );
34 | };
--------------------------------------------------------------------------------
/src/components/ImageUploader.tsx:
--------------------------------------------------------------------------------
1 | import React, { useRef } from 'react';
2 | import { Upload } from 'lucide-react';
3 | import { Button } from './Button';
4 | import { LoadingSpinner } from './LoadingSpinner';
5 | import { useImageProcessor } from '../hooks/useImageProcessor';
6 | import { validateImageFile } from '../utils/imageUtils';
7 |
8 | interface ImageUploaderProps {
9 | onImageSelect: (file: File) => void;
10 | }
11 |
12 | export const ImageUploader: React.FC
41 | {isProcessing ? (
42 |
59 | );
60 | }
61 |
--------------------------------------------------------------------------------
/src/components/LoadingSpinner.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export const LoadingSpinner: React.FC = () => {
4 | return (
5 |
6 |
7 | Processing image...
8 |
9 | );
10 | };
--------------------------------------------------------------------------------
/src/config/editorConfig.ts:
--------------------------------------------------------------------------------
1 | import { CropPreset, EditorConfig } from '../types/editor';
2 | import { TABS } from 'react-filerobot-image-editor';
3 | import Social from '@scaleflex/icons/social';
4 |
5 | const cropPresets: CropPreset[] = [
6 | {
7 | titleKey: 'square',
8 | descriptionKey: '1:1',
9 | ratio: 1,
10 | },
11 | {
12 | titleKey: 'portrait',
13 | descriptionKey: '3:4',
14 | ratio: 3 / 4,
15 | },
16 | {
17 | titleKey: 'socialMedia', // will be translated into Social Media as backend contains this translation key
18 | icon: Social, // React component, string or HTML Element
19 | groups: [
20 | {
21 | titleKey: 'linkedIn',
22 | items: [
23 | {
24 | titleKey: 'profilePhoto',
25 | width: 400,
26 | height: 400,
27 | descriptionKey: 'liProfilePhotoSize',
28 | disableManualResize: false,
29 | },
30 | {
31 | titleKey: 'profileCoverPhoto',
32 | width: 1584,
33 | height: 396,
34 | descriptionKey: 'liProfileCoverPhotoSize',
35 | },
36 | {
37 | titleKey: 'blogPostPhoto',
38 | width: 1200,
39 | height: 627,
40 | descriptionKey: 'liBlogPostPhotoSize',
41 | },
42 | {
43 | titleKey: 'companyLogo',
44 | width: 300,
45 | height: 300,
46 | descriptionKey: 'liCompanyLogoSize',
47 | },
48 | {
49 | titleKey: 'companyPageCover',
50 | width: 1128,
51 | height: 191,
52 | descriptionKey: 'liCompanyPageCoverSize',
53 | },
54 | ],
55 | },
56 | {
57 | titleKey: 'x',
58 | items: [
59 | {
60 | titleKey: 'profilePhoto',
61 | width: 400,
62 | height: 400,
63 | descriptionKey: 'twProfilePhotoSize',
64 | },
65 | {
66 | titleKey: 'headerPhoto',
67 | width: 1500,
68 | height: 500,
69 | descriptionKey: 'twHeaderPhotoSize',
70 | },
71 | {
72 | titleKey: 'inStreamPhoto',
73 | width: 1600,
74 | height: 1900,
75 | descriptionKey: 'twInStreamPhotoSize',
76 | },
77 | ],
78 | },
79 | {
80 | titleKey: 'instagram',
81 | items: [
82 | {
83 | titleKey: 'profilePhoto',
84 | width: 320,
85 | height: 320,
86 | descriptionKey: 'igProfilePhotoSize',
87 | },
88 | {
89 | titleKey: 'feedPortraitPhoto',
90 | width: 1080,
91 | height: 1350,
92 | descriptionKey: 'igFeedPortraitPhotoSize',
93 | },
94 | {
95 | titleKey: 'feedLandscapePhoto',
96 | width: 1080,
97 | height: 566,
98 | descriptionKey: 'igFeedLandscapePhotoSize',
99 | },
100 | {
101 | titleKey: 'feedSquarePhoto',
102 | width: 1080,
103 | height: 1080,
104 | descriptionKey: 'igFeedSquarePhotoSize',
105 | },
106 | {
107 | titleKey: 'storyPhoto',
108 | width: 1080,
109 | height: 1920,
110 | descriptionKey: 'igStoryPhotoSize',
111 | },
112 | ],
113 | },
114 | {
115 | titleKey: 'facebook',
116 | items: [
117 | {
118 | titleKey: 'profilePhoto',
119 | width: 170,
120 | height: 170,
121 | descriptionKey: 'fbProfilePhotoSize',
122 | },
123 | {
124 | titleKey: 'profileCoverPhoto',
125 | width: 851,
126 | height: 315,
127 | descriptionKey: 'fbProfileCoverPhotoSize',
128 | },
129 | {
130 | titleKey: 'eventCoverPhoto',
131 | width: 1200,
132 | height: 628,
133 | descriptionKey: 'fbEventCoverPhotoSize',
134 | },
135 | {
136 | titleKey: 'timelinePhoto',
137 | width: 1200,
138 | height: 630,
139 | descriptionKey: 'fbTimelinePhotoSize',
140 | },
141 | {
142 | titleKey: 'storyPhoto',
143 | width: 1080,
144 | height: 1920,
145 | descriptionKey: 'fbStoryPhotoSize',
146 | },
147 | ],
148 | },
149 | ],
150 | },
151 | ];
152 |
153 | export const createEditorConfig = (imageUrl: string): EditorConfig => ({
154 | source: imageUrl,
155 | defaultSavedImageType: 'png',
156 | defaultSavedImageName: 'edited-image',
157 | theme: {
158 | palette: {
159 | 'txt-primary': '#ffffff',
160 | 'txt-primary-invert': '#262626',
161 | 'txt-secondary': '#cccccc',
162 | 'txt-secondary-invert': '#4d4d4d',
163 | 'txt-placeholder': '#999999',
164 | 'accent-primary': '#2196f3',
165 | 'accent-primary-hover': '#1976d2',
166 | 'accent-primary-active': 'rgb(204 228 247)', // Button active color
167 | 'accent-primary-disabled': '#bbdefb',
168 | 'bg-primary': '#262626',
169 | 'bg-primary-hover': 'rgb(73 72 72)',
170 | 'bg-primary-active': '#333333',
171 | 'bg-primary-0-5-opacity': 'rgba(38, 38, 38, 0.5)',
172 | 'bg-secondary': '#2d2d2d',
173 | 'icons-primary': '#ffffff',
174 | 'icons-primary-opacity-0-6': 'rgba(255, 255, 255, 0.6)',
175 | 'icons-secondary': '#cccccc',
176 | 'icons-placeholder': '#999999',
177 | 'btn-primary-text': '#ffffff',
178 | 'btn-disabled-text': '#666666',
179 | 'link-primary': '#2196f3',
180 | 'link-hover': '#1976d2',
181 | 'link-active': '#1565c0',
182 | 'borders-primary': '#404040',
183 | 'borders-secondary': '#333333',
184 | 'borders-strong': '#666666',
185 | 'borders-invert': '#ffffff',
186 | 'border-active-bottom': '#2196f3',
187 | 'active-secondary': '#404040',
188 | 'active-secondary-hover': '#4d4d4d',
189 | 'active-secondary-active': '#595959',
190 | },
191 | typography: {
192 | fontFamily: 'Inter, system-ui, sans-serif'
193 | },
194 | },
195 | annotationsCommon: {
196 | fill: '#2196f3',
197 | },
198 | Text: {
199 | text: 'Add text...',
200 | fonts: [
201 | { label: 'Arial', value: 'Arial' },
202 | { label: 'Helvetica', value: 'Helvetica' },
203 | { label: 'Inter', value: 'Inter' },
204 | { label: 'Times New Roman', value: 'Times New Roman' },
205 | { label: 'Courier New', value: 'Courier New' },
206 | { label: 'Georgia', value: 'Georgia' },
207 | { label: 'Verdana', value: 'Verdana' },
208 | { label: 'Geneva', value: 'Geneva' },
209 | { label: 'Trebuchet MS', value: 'Trebuchet MS' },
210 | { label: 'Arial Black', value: 'Arial Black' },
211 | { label: 'Impact', value: 'Impact' },
212 | { label: 'Comic Sans MS', value: 'Comic Sans MS' },
213 | { label: 'Lucida Console', value: 'Lucida Console' },
214 | { label: 'Tahoma', value: 'Tahoma' },
215 | { label: 'Palatino Linotype', value: 'Palatino Linotype' },
216 | { label: 'Book Antiqua', value: 'Book Antiqua' },
217 | { label: 'Arial Narrow', value: 'Arial Narrow' },
218 | { label: 'Century Gothic', value: 'Century Gothic' },
219 | { label: 'Lucida Sans Unicode', value: 'Lucida Sans Unicode' },
220 | { label: 'Garamond', value: 'Garamond' }
221 | ],
222 | },
223 | translations: {
224 | profile: 'Profile',
225 | coverPhoto: 'Cover Photo',
226 | facebook: 'Facebook',
227 | socialMedia: 'Social Media',
228 | classicTv: 'Classic TV',
229 | wide: 'Widescreen',
230 | square: 'Square',
231 | portrait: 'Portrait',
232 | },
233 | Crop: {
234 | presetsItems: cropPresets,
235 | autoResize: true,
236 | },
237 | defaultTabId: TABS.ADJUST,
238 | defaultToolId: 'Crop',
239 | observePluginContainerSize: true,
240 | showCanvasOnly: false,
241 | });
242 |
--------------------------------------------------------------------------------
/src/hooks/useImageProcessor.ts:
--------------------------------------------------------------------------------
1 | import { useState, useCallback } from 'react';
2 |
3 | interface ImageProcessorResult {
4 | processImage: (file: File) => Promise