├── .prettierrc
├── .gitignore
├── .npmignore
├── tsconfig.node.json
├── __tests__
└── PixelsImage.test.tsx
├── src
├── index.ts
├── types.ts
├── portal.tsx
├── icons.tsx
├── ReactProfile.tsx
└── language.ts
├── tsconfig.json
├── themes
├── minify.js
├── default.src.css
└── dark.src.css
├── vite.config.ts
├── docs
├── GET_STARTED.md
├── getDoc.js
└── README.md
├── package.json
├── README.md
└── LICENSE
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "printWidth": 120
3 | }
4 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | dist/
2 | node_modules/
3 | themes/*.min.css
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | __tests__/
2 | src/
3 | node_modules/
4 | themes/*.src.css
5 | themes/minify.js
6 | docs/
--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "composite": true,
4 | "skipLibCheck": true,
5 | "module": "ESNext",
6 | "moduleResolution": "bundler",
7 | "allowSyntheticDefaultImports": true
8 | },
9 | "include": ["vite.config.ts"]
10 | }
--------------------------------------------------------------------------------
/__tests__/PixelsImage.test.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { render } from '@testing-library/react';
3 | import { PixelsImage } from "../src"
4 |
5 | describe('PixelsImage', () => {
6 |
7 | it('just render', async () => {
8 | const element = render()
9 | expect(element.getByPlaceholderText("Test Image")).toBeDefined()
10 | })
11 |
12 | });
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import ReactProfile from "./ReactProfile";
2 |
3 | export { openEditor } from './portal';
4 | export type { ReactProfileProps, Change, SUPPORTED_LANGUAGES } from './types';
5 | export type { ReactCropProps, Crop } from 'react-image-crop'
6 | export type { EXPORT_OBJECT } from 'react-pixels'
7 | export { FILTERS_LIST as ALL_FILTERS } from 'react-pixels';
8 |
9 | export default ReactProfile
10 | export { ReactProfile }
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "outDir": "./dist/",
4 | "target": "es2020",
5 | "module": "es2020",
6 | "lib": ["dom", "dom.iterable", "esnext"],
7 | "skipLibCheck": true,
8 | "esModuleInterop": true,
9 | "allowSyntheticDefaultImports": true,
10 | "strict": true,
11 | "forceConsistentCasingInFileNames": true,
12 | "noFallthroughCasesInSwitch": true,
13 | "moduleResolution": "node",
14 | "resolveJsonModule": true,
15 | "isolatedModules": true,
16 | "declaration": true,
17 | "allowJs": true,
18 | "jsx": "react"
19 | },
20 | "include": ["src/**/*.ts", "src/**/*.tsx"],
21 | "exclude": ["node_modules"]
22 | }
23 |
--------------------------------------------------------------------------------
/themes/minify.js:
--------------------------------------------------------------------------------
1 | import path from "path"
2 | import fs from "fs"
3 | import postcss from "postcss"
4 | import cssnano from "cssnano"
5 |
6 | function minify(cssPath) {
7 | const basename = path.basename(cssPath);
8 | const newBasename = basename.split(".")[0] + ".min.css";
9 | const css = fs.readFileSync(cssPath, 'utf-8');
10 | postcss([cssnano])
11 | .process(css, { from: cssPath })
12 | .then(({ css }) => fs.writeFileSync(path.join(cssPath, '../', newBasename), css))
13 | }
14 |
15 | fs.readdir('./themes', (_, files) => {
16 | if(files) {
17 | files = files.filter(name => name.endsWith(".src.css"))
18 | for(const file of files) {
19 | minify(path.join('./themes', file))
20 | }
21 | }
22 | })
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { resolve } from 'path'
2 | import { defineConfig } from 'vite'
3 | import react from '@vitejs/plugin-react'
4 | import dts from 'vite-plugin-dts'
5 |
6 | export default defineConfig({
7 | build: {
8 | lib: {
9 | entry: resolve(__dirname, 'src/index.ts'),
10 | name: 'ReactProfile',
11 | fileName: 'index',
12 | },
13 | rollupOptions: {
14 | external: ['react', 'react-dom'],
15 | output: {
16 | exports: "named",
17 | globals: {
18 | react: 'React',
19 | 'react-dom': 'ReactDOM',
20 | },
21 | assetFileNames: chunkInfo => {
22 | return chunkInfo.name || ''
23 | },
24 | },
25 | },
26 | },
27 | plugins: [
28 | react({
29 | jsxRuntime: 'classic',
30 | }),
31 | dts(),
32 | ],
33 | })
--------------------------------------------------------------------------------
/docs/GET_STARTED.md:
--------------------------------------------------------------------------------
1 | ## Installation
2 |
3 | In your terminal, execute this command depending on your preferred package manager:
4 |
5 | ```
6 | npm i react-profile
7 | yarn add react-profile
8 | pnpm add react-profile
9 | ```
10 |
11 | ## Example
12 |
13 | One way to open the editor is passing the image path and rendering it. For example:
14 |
15 | ```javascript
16 | import React from "react";
17 | import ReactProfile from "react-profile";
18 | import "react-profile/themes/default.min.css";
19 |
20 | function App() {
21 | return ;
22 | }
23 |
24 | export default App;
25 | ```
26 |
27 | Additionally, you can open the editor directly in your code. For example:
28 |
29 | ```javascript
30 | import { openEditor } from "react-profile";
31 | import "react-profile/themes/dark.min.css";
32 |
33 | async function open() {
34 | const result = await openEditor({ src: "./your-image.jpg" });
35 | }
36 | ```
37 |
38 | Very important: Always import the corresponding style file for the desired theme when rendering/calling the editor.
39 |
--------------------------------------------------------------------------------
/docs/getDoc.js:
--------------------------------------------------------------------------------
1 | const path = require("path");
2 | const fs = require("fs");
3 | const postcss = require("postcss");
4 | const cssnano = require("cssnano");
5 |
6 | function minify(cssPath) {
7 | const basename = path.basename(cssPath);
8 | const newBasename = basename.split(".")[0] + ".min.css";
9 | const css = fs.readFileSync(cssPath, "utf-8");
10 | postcss([cssnano])
11 | .process(css, { from: cssPath })
12 | .then(({ css }) => fs.writeFileSync(path.join(cssPath, "../", newBasename), css));
13 | }
14 |
15 | fs.readdir("./docs", (_, files) => {
16 | if (files) {
17 | files = files.filter((name) => name.endsWith(".md") || name !== "README.md");
18 | const obj = {};
19 | let readme = fs.readFileSync(path.join("./docs", "README.MD"), "utf-8");
20 | for (const file of files) {
21 | const name = file.split(".")[0];
22 | const content = fs.readFileSync(path.join("./docs", file), "utf-8");
23 | obj[name] = content;
24 | }
25 | for (const [key, content] of Object.entries(obj)) {
26 | readme = readme.replace(`{{${key}}}`, content);
27 | }
28 | fs.writeFileSync("./README.MD", readme, "utf-8");
29 | }
30 | });
31 |
--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
1 |
2 |
3 | import { ReactCropProps, type Crop } from 'react-image-crop'
4 | import { EXPORT_OBJECT, FILTERS } from 'react-pixels';
5 |
6 | export type MODULES = "crop" | "colors" | "filter"
7 |
8 | export type SUPPORTED_LANGUAGES = "es" | "en" | "zh" | "ja" | "it" | "fr" | "hin"
9 |
10 | export interface ReactProfileProps {
11 | src: string | File | HTMLImageElement;
12 | initCrop?: Crop;
13 | cropOptions?: Omit;
14 | square?: boolean;
15 | onCancel?: () => void;
16 | onDone?: (editedImage?: EXPORT_OBJECT) => void;
17 | filtersEnabled?: FILTERS[],
18 | maxWidth?: number,
19 | maxHeight?: number,
20 | quality?: number,
21 | maxImageSize?: number,
22 | modules?: MODULES[],
23 | language?: SUPPORTED_LANGUAGES
24 | type?: 'image/jpeg'|'image/png'
25 | }
26 |
27 | export interface Change {
28 | brightness: number;
29 | contrast: number;
30 | crop?: Crop;
31 | filter?: string | undefined;
32 | saturation: number;
33 | verticalFlip: boolean;
34 | horizontalFlip: boolean;
35 | lastChangeTime: number;
36 | }
37 |
38 |
39 | export interface SendChange {
40 | brightness?: number;
41 | contrast?: number;
42 | crop?: Crop;
43 | filter?: string | undefined;
44 | saturation?: number;
45 | verticalFlip?: boolean;
46 | horizontalFlip?: boolean;
47 | }
--------------------------------------------------------------------------------
/src/portal.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import ReactDOM18 from 'react-dom/client'
4 | import { ReactProfileProps } from './types';
5 | import ReactProfile from './ReactProfile';
6 | import { EXPORT_OBJECT } from 'react-pixels';
7 |
8 | export const openEditor = async (props: ReactProfileProps) => {
9 |
10 | return await new Promise<{ done: boolean, cancel: boolean, editedImage?: EXPORT_OBJECT }>((resolve, reject) => {
11 | try {
12 | const [reactVersion] = React.version.split(".")
13 |
14 | const root = document.createElement("div");
15 | root.className = "rp-root";
16 | document.body.append(root);
17 |
18 | const onCancel = () => {
19 | resolve({ cancel: true, done: false });
20 | cleanUp();
21 | };
22 |
23 | const onDone = (editedImage?: EXPORT_OBJECT) => {
24 | resolve({ cancel: false, done: true, editedImage });
25 | cleanUp();
26 | };
27 |
28 | const cleanUp = () => {
29 | ReactDOM.unmountComponentAtNode(root);
30 | root.remove();
31 | };
32 |
33 | if(!props.src) props = { src: props as any }
34 |
35 | if(Number(reactVersion) >= 18 && ReactDOM18.createRoot) {
36 | const reactRoot = ReactDOM18.createRoot(root);
37 | reactRoot.render()
38 | } else {
39 | ReactDOM.render(
40 | ,
41 | root
42 | );
43 | }
44 | } catch (err) {
45 | reject(err);
46 | }
47 | });
48 | };
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-profile",
3 | "version": "1.3.3",
4 | "description": "React Profile Editor, crop, upload, apply filters and adjust colors for your avatar image. Optimize the image size for your application",
5 | "repository": "https://github.com/mdjfs/react-profile",
6 | "homepage": "https://react-image-editor.com",
7 | "author": "Marcos Fuenmayor",
8 | "license": "Apache-2.0 license",
9 | "main": "dist/index.js",
10 | "types": "dist/index.d.ts",
11 | "type": "module",
12 | "scripts": {
13 | "dev": "vite",
14 | "build": "node themes/minify.js && vite build",
15 | "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
16 | "preview": "vite preview",
17 | "prepare": "npm run build"
18 | },
19 | "exports": {
20 | ".": {
21 | "import": "./dist/index.js",
22 | "require": "./dist/index.umd.cjs"
23 | },
24 | "./themes/": "./themes/",
25 | "./themes/*": "./themes/*.min.css",
26 | "./themes/default": "./themes/default.min.css",
27 | "./themes/dark": "./themes/dark.min.css",
28 | "./themes/default.min.css": "./themes/default.min.css",
29 | "./themes/dark.min.css": "./themes/dark.min.css",
30 | "./package.json": "./package.json"
31 | },
32 | "jest": {
33 | "preset": "ts-jest",
34 | "testEnvironment": "jsdom"
35 | },
36 | "devDependencies": {
37 | "@babel/register": "^7.22.5",
38 | "@testing-library/jest-dom": "^6.1.2",
39 | "@testing-library/react": "^14.0.0",
40 | "@testing-library/react-hooks": "^8.0.1",
41 | "@types/jest": "^29.5.4",
42 | "@types/react": "^18.2.21",
43 | "@types/react-dom": "^18.2.7",
44 | "@vitejs/plugin-react": "^4.0.4",
45 | "cssnano": "^6.0.1",
46 | "jest": "^29.6.4",
47 | "jest-environment-jsdom": "^29.6.4",
48 | "postcss": "^8.4.29",
49 | "react": "^18.2.0",
50 | "react-dom": "^18.2.0",
51 | "ts-jest": "^29.1.1",
52 | "typescript": "^5.2.2",
53 | "vite": "^4.4.9",
54 | "vite-plugin-dts": "^3.5.3"
55 | },
56 | "peerDependencies": {
57 | "react": "*",
58 | "react-dom": "*"
59 | },
60 | "dependencies": {
61 | "react-image-crop": "^10.1.5",
62 | "react-pixels": "^0.5.8"
63 | },
64 | "keywords": [
65 | "react",
66 | "profile",
67 | "image",
68 | "image editor",
69 | "image crop",
70 | "crop image",
71 | "image filter",
72 | "filter image",
73 | "filter",
74 | "adjust",
75 | "brightness",
76 | "saturation",
77 | "contrast",
78 | "crop",
79 | "flip",
80 | "flip image",
81 | "flip image horizontal",
82 | "horizontal",
83 | "flip image vertical",
84 | "vertical",
85 | "editor",
86 | "avatar",
87 | "canvas",
88 | "react image editor",
89 | "react avatar editor",
90 | "react profile editor",
91 | "react image crop",
92 | "react avatar crop",
93 | "react profile crop"
94 | ]
95 | }
96 |
--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | # React Profile
4 |
5 | [](https://www.npmjs.com/package/react-profile)
6 |
7 | A simple and open-source React component for editing photos.
8 |
9 | [Demo](https://react-profile-page-coral.vercel.app/demo)
10 |
11 | [Homepage](https://react-profile-page-coral.vercel.app/)
12 |
13 | ## Table of Contents
14 |
15 | 1. [Installation](#installation)
16 | 2. [Example](#example)
17 | 3. [Options](#options)
18 | 4. [Props](#props)
19 | 5. [Contributing / Developing](#contributing--developing)
20 |
21 | {{GET_STARTED}}
22 |
23 | ## Options
24 |
25 | You can change the editor's language with the 'language' property. For example:
26 |
27 | ```javascript
28 | import React from "react";
29 | import ReactProfile from "react-profile";
30 | import "react-profile/themes/default.min.css";
31 |
32 | function App() {
33 | return ;
34 | }
35 |
36 | export default App;
37 | ```
38 |
39 | You can request an image in square format. For example:
40 |
41 | ```javascript
42 | import React from "react";
43 | import ReactProfile from "react-profile";
44 | import "react-profile/themes/default.min.css";
45 |
46 | function App() {
47 | return ;
48 | }
49 |
50 | export default App;
51 | ```
52 |
53 | You can enable only the modules you want using the 'modules' property. For example:
54 |
55 | ```javascript
56 | import React from "react";
57 | import ReactProfile from "react-profile";
58 | import "react-profile/themes/default.min.css";
59 |
60 | function App() {
61 | return ;
62 | }
63 |
64 | export default App;
65 | ```
66 |
67 | You can add more filters or even all available filters. For example:
68 |
69 | ```javascript
70 | import React from "react";
71 | import ReactProfile, { ALL_FILTERS } from "react-profile";
72 | import "react-profile/themes/default.min.css";
73 |
74 | function App() {
75 | return ;
76 | }
77 |
78 | export default App;
79 | ```
80 |
81 | Warning: Adding many filters could potentially slow down the editor depending on the image's size
82 |
83 | To explore all the filters, you can visit the [Pixels.js](https://silvia-odwyer.github.io/pixels.js/) website
84 |
85 | You can initialize the component with an HTMLImageElement object specifying the type. For Example:
86 |
87 | ```javascript
88 | import React from "react";
89 | import ReactProfile from "react-profile";
90 | import "react-profile/themes/default.min.css";
91 |
92 | function App() {
93 | return ;
94 | }
95 |
96 | export default App;
97 | ```
98 |
99 | You can change some options to crop the image. The ['react-image-crop'](https://github.com/DominicTobias/react-image-crop) library specifies all the options. For Example:
100 |
101 | ```javascript
102 | import React from "react";
103 | import ReactProfile from "react-profile";
104 | import "react-profile/themes/default.min.css";
105 |
106 | function App() {
107 | return ;
108 | }
109 |
110 | export default App;
111 | ```
112 |
113 | You can change how the crop object is initialized in the editor. The ['react-image-crop'](https://github.com/DominicTobias/react-image-crop) library specifies all the options. For Example:
114 |
115 | ```javascript
116 | import React from "react";
117 | import ReactProfile from "react-profile";
118 | import "react-profile/themes/default.min.css";
119 |
120 | function App() {
121 | return (
122 |
132 | );
133 | }
134 |
135 | export default App;
136 | ```
137 |
138 | ## Props
139 |
140 | **`src?: string | HTMLImageObject`**
141 |
142 | Source of the image
143 |
144 | **`initCrop?: Crop`**
145 |
146 | react-image-crop init crop
147 |
148 | **`cropOptions?: CropOptions`**
149 |
150 | react-image-crop crop options
151 |
152 | **`square?: boolean`**
153 |
154 | Square Image
155 |
156 | **`onCancel?: () => void`**
157 |
158 | Handler when the user cancels edit
159 |
160 | **`onDone?: (exportObject?: EXPORT_OBJECT) => void`**
161 |
162 | Handler when the user finishes editing. The EXPORT_OBJECT has the following methods:
163 |
164 | - getCanvas() -> get canvas object
165 | - getBlob() (async) -> get blob
166 | - getDataURL() -> get data url
167 | - getImageFromBlob() (async) -> get HTMLImageElement from blob
168 | - getImageFromDataURL() (async) -> get HTMLImageElement from blob
169 |
170 | **`maxWidth?: number`**
171 |
172 | It refers to the maximum resolution (in width) of the image. Note: This is different from the size rendered on the screen. It is done for image optimization. The default maximum is '1000'. Try not to use very high resolutions to avoid slowdowns.
173 |
174 | **`maxHeight?: number`**
175 |
176 | It refers to the maximum resolution (in height) of the image. Note: This is different from the size rendered on the screen. It is done for image optimization. The default maximum is '1000'. Try not to use very high resolutions to avoid slowdowns.
177 |
178 | **`quality?: number`**
179 |
180 | Image quality for optimization purposes. Default is '0.8'. Only affects JPEG format images. Range of values 0-1
181 |
182 | **`maxImageSize?: number`**
183 |
184 | Maximum image size in bytes. The default maximum size is '3MB' (1024 \* 1024 \* 3). If you want to work with larger images, you should specify it here. Note: Working with very large images can overload the canvas object and may cause the editor to fail.
185 |
186 | **`modules?: MODULES[]`**
187 |
188 | An array that specifies which modules the developer wants to be rendered in the editor.
189 |
190 | **`type?: 'image/jpeg|image/png'`**
191 |
192 | This property declares the type of the image for the editor
193 |
194 | ## Contributing / Developing
195 |
196 | In your project, navigate to the 'node_modules' folder and look for the 'react-profile' package
197 |
198 | Clone the repository
199 |
200 | `git clone https://github.com/mdjfs/react-profile`
201 |
202 | Install and build
203 |
204 | `yarn && yarn run build`
205 |
206 | Now. inside src/ you can _change everything about logics, languages, icons, etc_
207 |
208 | And inside themes/ you can _change all the styles, add new themes, etc_
209 |
210 | After each change. Remember run builds again.
211 |
212 | When you're ready, open a pull request.
213 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | # React Profile
4 |
5 | [](https://www.npmjs.com/package/react-profile)
6 |
7 | A simple and open-source React component for editing photos.
8 |
9 | [Demo](https://react-profile-page-coral.vercel.app/demo)
10 |
11 | [Homepage](https://react-profile-page-coral.vercel.app/)
12 |
13 | ## Table of Contents
14 |
15 | 1. [Installation](#installation)
16 | 2. [Example](#example)
17 | 3. [Options](#options)
18 | 4. [Props](#props)
19 | 5. [Contributing / Developing](#contributing--developing)
20 |
21 | ## Installation
22 |
23 | In your terminal, execute this command depending on your preferred package manager:
24 |
25 | ```
26 | npm i react-profile
27 | yarn add react-profile
28 | pnpm add react-profile
29 | ```
30 |
31 | ## Example
32 |
33 | One way to open the editor is passing the image path and rendering it. For example:
34 |
35 | ```javascript
36 | import React from "react";
37 | import ReactProfile from "react-profile";
38 | import "react-profile/themes/default.min.css";
39 |
40 | function App() {
41 | return ;
42 | }
43 |
44 | export default App;
45 | ```
46 |
47 | Additionally, you can open the editor directly in your code. For example:
48 |
49 | ```javascript
50 | import { openEditor } from "react-profile";
51 | import "react-profile/themes/dark.min.css";
52 |
53 | async function open() {
54 | const result = await openEditor({ src: "./your-image.jpg" });
55 | }
56 | ```
57 |
58 | Very important: Always import the corresponding style file for the desired theme when rendering/calling the editor.
59 |
60 |
61 | ## Options
62 |
63 | You can change the editor's language with the 'language' property. For example:
64 |
65 | ```javascript
66 | import React from "react";
67 | import ReactProfile from "react-profile";
68 | import "react-profile/themes/default.min.css";
69 |
70 | function App() {
71 | return ;
72 | }
73 |
74 | export default App;
75 | ```
76 |
77 | You can request an image in square format. For example:
78 |
79 | ```javascript
80 | import React from "react";
81 | import ReactProfile from "react-profile";
82 | import "react-profile/themes/default.min.css";
83 |
84 | function App() {
85 | return ;
86 | }
87 |
88 | export default App;
89 | ```
90 |
91 | You can enable only the modules you want using the 'modules' property. For example:
92 |
93 | ```javascript
94 | import React from "react";
95 | import ReactProfile from "react-profile";
96 | import "react-profile/themes/default.min.css";
97 |
98 | function App() {
99 | return ;
100 | }
101 |
102 | export default App;
103 | ```
104 |
105 | You can add more filters or even all available filters. For example:
106 |
107 | ```javascript
108 | import React from "react";
109 | import ReactProfile, { ALL_FILTERS } from "react-profile";
110 | import "react-profile/themes/default.min.css";
111 |
112 | function App() {
113 | return ;
114 | }
115 |
116 | export default App;
117 | ```
118 |
119 | Warning: Adding many filters could potentially slow down the editor depending on the image's size
120 |
121 | To explore all the filters, you can visit the [Pixels.js](https://silvia-odwyer.github.io/pixels.js/) website
122 |
123 | You can initialize the component with an HTMLImageElement object specifying the type. For Example:
124 |
125 | ```javascript
126 | import React from "react";
127 | import ReactProfile from "react-profile";
128 | import "react-profile/themes/default.min.css";
129 |
130 | function App() {
131 | return ;
132 | }
133 |
134 | export default App;
135 | ```
136 |
137 | You can change some options to crop the image. The ['react-image-crop'](https://github.com/DominicTobias/react-image-crop) library specifies all the options. For Example:
138 |
139 | ```javascript
140 | import React from "react";
141 | import ReactProfile from "react-profile";
142 | import "react-profile/themes/default.min.css";
143 |
144 | function App() {
145 | return ;
146 | }
147 |
148 | export default App;
149 | ```
150 |
151 | You can change how the crop object is initialized in the editor. The ['react-image-crop'](https://github.com/DominicTobias/react-image-crop) library specifies all the options. For Example:
152 |
153 | ```javascript
154 | import React from "react";
155 | import ReactProfile from "react-profile";
156 | import "react-profile/themes/default.min.css";
157 |
158 | function App() {
159 | return (
160 |
170 | );
171 | }
172 |
173 | export default App;
174 | ```
175 |
176 | ## Props
177 |
178 | **`src?: string | File | HTMLImageObject`**
179 |
180 | Source of the image
181 |
182 | **`initCrop?: Crop`**
183 |
184 | react-image-crop init crop
185 |
186 | **`cropOptions?: CropOptions`**
187 |
188 | react-image-crop crop options
189 |
190 | **`square?: boolean`**
191 |
192 | Square Image
193 |
194 | **`onCancel?: () => void`**
195 |
196 | Handler when the user cancels edit
197 |
198 | **`onDone?: (exportObject?: EXPORT_OBJECT) => void`**
199 |
200 | Handler when the user finishes editing. The EXPORT_OBJECT has the following methods:
201 |
202 | - getCanvas() -> get canvas object
203 | - getBlob() (async) -> get blob
204 | - getDataURL() -> get data url
205 | - getImageFromBlob() (async) -> get HTMLImageElement from blob
206 | - getImageFromDataURL() (async) -> get HTMLImageElement from blob
207 |
208 | **`maxWidth?: number`**
209 |
210 | It refers to the maximum resolution (in width) of the image. Note: This is different from the size rendered on the screen. It is done for image optimization. The default maximum is '1000'. Try not to use very high resolutions to avoid slowdowns.
211 |
212 | **`maxHeight?: number`**
213 |
214 | It refers to the maximum resolution (in height) of the image. Note: This is different from the size rendered on the screen. It is done for image optimization. The default maximum is '1000'. Try not to use very high resolutions to avoid slowdowns.
215 |
216 | **`quality?: number`**
217 |
218 | Image quality for optimization purposes. Default is '0.8'. Only affects JPEG format images. Range of values 0-1
219 |
220 | **`maxImageSize?: number`**
221 |
222 | Maximum image size in bytes. The default maximum size is '10MB' (1024 \* 1024 \* 10). If you want to work with larger images, you should specify it here. Note: Working with very large images can overload the canvas object and may cause the editor to fail.
223 |
224 | **`modules?: MODULES[]`**
225 |
226 | An array that specifies which modules the developer wants to be rendered in the editor.
227 |
228 | **`type?: 'image/jpeg|image/png'`**
229 |
230 | This property declares the type of the image for the editor
231 |
232 | ## Contributing / Developing
233 |
234 | In your project, navigate to the 'node_modules' folder and look for the 'react-profile' package
235 |
236 | Clone the repository
237 |
238 | `git clone https://github.com/mdjfs/react-profile`
239 |
240 | Install and build
241 |
242 | `yarn && yarn run build`
243 |
244 | Now. inside src/ you can _change everything about logics, languages, icons, etc_
245 |
246 | And inside themes/ you can _change all the styles, add new themes, etc_
247 |
248 | After each change. Remember run builds again.
249 |
250 | When you're ready, open a pull request.
251 |
--------------------------------------------------------------------------------
/src/icons.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const ICON_SATURATION = (
4 |
5 |
8 |
9 | );
10 |
11 | const ICON_CONTRAST = (
12 |
13 |
16 |
17 | );
18 |
19 | const ICON_BRIGHTNESS = (
20 |
21 |
24 |
25 | );
26 |
27 | const ICON_FLIP = (
28 |
29 |
32 |
33 | );
34 |
35 | const ICON_CROP = (
36 |
37 |
40 |
41 | );
42 |
43 | const ICON_UNDO = (
44 |
45 |
48 |
49 | );
50 |
51 | const ICON_SPINNER = (
52 |
53 |
56 |
57 | );
58 |
59 | const ICON_COLORS = (
60 |
61 |
64 |
65 | );
66 |
67 | const ICON_FILTER = (
68 |
69 |
72 |
73 | );
74 |
75 |
76 | export {
77 | ICON_SATURATION,
78 | ICON_CONTRAST,
79 | ICON_BRIGHTNESS,
80 | ICON_FLIP,
81 | ICON_CROP,
82 | ICON_UNDO,
83 | ICON_SPINNER,
84 | ICON_FILTER,
85 | ICON_COLORS
86 | };
87 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Apache License
2 | Version 2.0, January 2004
3 | http://www.apache.org/licenses/
4 |
5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
6 |
7 | 1. Definitions.
8 |
9 | "License" shall mean the terms and conditions for use, reproduction,
10 | and distribution as defined by Sections 1 through 9 of this document.
11 |
12 | "Licensor" shall mean the copyright owner or entity authorized by
13 | the copyright owner that is granting the License.
14 |
15 | "Legal Entity" shall mean the union of the acting entity and all
16 | other entities that control, are controlled by, or are under common
17 | control with that entity. For the purposes of this definition,
18 | "control" means (i) the power, direct or indirect, to cause the
19 | direction or management of such entity, whether by contract or
20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the
21 | outstanding shares, or (iii) beneficial ownership of such entity.
22 |
23 | "You" (or "Your") shall mean an individual or Legal Entity
24 | exercising permissions granted by this License.
25 |
26 | "Source" form shall mean the preferred form for making modifications,
27 | including but not limited to software source code, documentation
28 | source, and configuration files.
29 |
30 | "Object" form shall mean any form resulting from mechanical
31 | transformation or translation of a Source form, including but
32 | not limited to compiled object code, generated documentation,
33 | and conversions to other media types.
34 |
35 | "Work" shall mean the work of authorship, whether in Source or
36 | Object form, made available under the License, as indicated by a
37 | copyright notice that is included in or attached to the work
38 | (an example is provided in the Appendix below).
39 |
40 | "Derivative Works" shall mean any work, whether in Source or Object
41 | form, that is based on (or derived from) the Work and for which the
42 | editorial revisions, annotations, elaborations, or other modifications
43 | represent, as a whole, an original work of authorship. For the purposes
44 | of this License, Derivative Works shall not include works that remain
45 | separable from, or merely link (or bind by name) to the interfaces of,
46 | the Work and Derivative Works thereof.
47 |
48 | "Contribution" shall mean any work of authorship, including
49 | the original version of the Work and any modifications or additions
50 | to that Work or Derivative Works thereof, that is intentionally
51 | submitted to Licensor for inclusion in the Work by the copyright owner
52 | or by an individual or Legal Entity authorized to submit on behalf of
53 | the copyright owner. For the purposes of this definition, "submitted"
54 | means any form of electronic, verbal, or written communication sent
55 | to the Licensor or its representatives, including but not limited to
56 | communication on electronic mailing lists, source code control systems,
57 | and issue tracking systems that are managed by, or on behalf of, the
58 | Licensor for the purpose of discussing and improving the Work, but
59 | excluding communication that is conspicuously marked or otherwise
60 | designated in writing by the copyright owner as "Not a Contribution."
61 |
62 | "Contributor" shall mean Licensor and any individual or Legal Entity
63 | on behalf of whom a Contribution has been received by Licensor and
64 | subsequently incorporated within the Work.
65 |
66 | 2. Grant of Copyright License. Subject to the terms and conditions of
67 | this License, each Contributor hereby grants to You a perpetual,
68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
69 | copyright license to reproduce, prepare Derivative Works of,
70 | publicly display, publicly perform, sublicense, and distribute the
71 | Work and such Derivative Works in Source or Object form.
72 |
73 | 3. Grant of Patent License. Subject to the terms and conditions of
74 | this License, each Contributor hereby grants to You a perpetual,
75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
76 | (except as stated in this section) patent license to make, have made,
77 | use, offer to sell, sell, import, and otherwise transfer the Work,
78 | where such license applies only to those patent claims licensable
79 | by such Contributor that are necessarily infringed by their
80 | Contribution(s) alone or by combination of their Contribution(s)
81 | with the Work to which such Contribution(s) was submitted. If You
82 | institute patent litigation against any entity (including a
83 | cross-claim or counterclaim in a lawsuit) alleging that the Work
84 | or a Contribution incorporated within the Work constitutes direct
85 | or contributory patent infringement, then any patent licenses
86 | granted to You under this License for that Work shall terminate
87 | as of the date such litigation is filed.
88 |
89 | 4. Redistribution. You may reproduce and distribute copies of the
90 | Work or Derivative Works thereof in any medium, with or without
91 | modifications, and in Source or Object form, provided that You
92 | meet the following conditions:
93 |
94 | (a) You must give any other recipients of the Work or
95 | Derivative Works a copy of this License; and
96 |
97 | (b) You must cause any modified files to carry prominent notices
98 | stating that You changed the files; and
99 |
100 | (c) You must retain, in the Source form of any Derivative Works
101 | that You distribute, all copyright, patent, trademark, and
102 | attribution notices from the Source form of the Work,
103 | excluding those notices that do not pertain to any part of
104 | the Derivative Works; and
105 |
106 | (d) If the Work includes a "NOTICE" text file as part of its
107 | distribution, then any Derivative Works that You distribute must
108 | include a readable copy of the attribution notices contained
109 | within such NOTICE file, excluding those notices that do not
110 | pertain to any part of the Derivative Works, in at least one
111 | of the following places: within a NOTICE text file distributed
112 | as part of the Derivative Works; within the Source form or
113 | documentation, if provided along with the Derivative Works; or,
114 | within a display generated by the Derivative Works, if and
115 | wherever such third-party notices normally appear. The contents
116 | of the NOTICE file are for informational purposes only and
117 | do not modify the License. You may add Your own attribution
118 | notices within Derivative Works that You distribute, alongside
119 | or as an addendum to the NOTICE text from the Work, provided
120 | that such additional attribution notices cannot be construed
121 | as modifying the License.
122 |
123 | You may add Your own copyright statement to Your modifications and
124 | may provide additional or different license terms and conditions
125 | for use, reproduction, or distribution of Your modifications, or
126 | for any such Derivative Works as a whole, provided Your use,
127 | reproduction, and distribution of the Work otherwise complies with
128 | the conditions stated in this License.
129 |
130 | 5. Submission of Contributions. Unless You explicitly state otherwise,
131 | any Contribution intentionally submitted for inclusion in the Work
132 | by You to the Licensor shall be under the terms and conditions of
133 | this License, without any additional terms or conditions.
134 | Notwithstanding the above, nothing herein shall supersede or modify
135 | the terms of any separate license agreement you may have executed
136 | with Licensor regarding such Contributions.
137 |
138 | 6. Trademarks. This License does not grant permission to use the trade
139 | names, trademarks, service marks, or product names of the Licensor,
140 | except as required for reasonable and customary use in describing the
141 | origin of the Work and reproducing the content of the NOTICE file.
142 |
143 | 7. Disclaimer of Warranty. Unless required by applicable law or
144 | agreed to in writing, Licensor provides the Work (and each
145 | Contributor provides its Contributions) on an "AS IS" BASIS,
146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 | implied, including, without limitation, any warranties or conditions
148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 | PARTICULAR PURPOSE. You are solely responsible for determining the
150 | appropriateness of using or redistributing the Work and assume any
151 | risks associated with Your exercise of permissions under this License.
152 |
153 | 8. Limitation of Liability. In no event and under no legal theory,
154 | whether in tort (including negligence), contract, or otherwise,
155 | unless required by applicable law (such as deliberate and grossly
156 | negligent acts) or agreed to in writing, shall any Contributor be
157 | liable to You for damages, including any direct, indirect, special,
158 | incidental, or consequential damages of any character arising as a
159 | result of this License or out of the use or inability to use the
160 | Work (including but not limited to damages for loss of goodwill,
161 | work stoppage, computer failure or malfunction, or any and all
162 | other commercial damages or losses), even if such Contributor
163 | has been advised of the possibility of such damages.
164 |
165 | 9. Accepting Warranty or Additional Liability. While redistributing
166 | the Work or Derivative Works thereof, You may choose to offer,
167 | and charge a fee for, acceptance of support, warranty, indemnity,
168 | or other liability obligations and/or rights consistent with this
169 | License. However, in accepting such obligations, You may act only
170 | on Your own behalf and on Your sole responsibility, not on behalf
171 | of any other Contributor, and only if You agree to indemnify,
172 | defend, and hold each Contributor harmless for any liability
173 | incurred by, or claims asserted against, such Contributor by reason
174 | of your accepting any such warranty or additional liability.
175 |
176 | END OF TERMS AND CONDITIONS
177 |
178 | APPENDIX: How to apply the Apache License to your work.
179 |
180 | To apply the Apache License to your work, attach the following
181 | boilerplate notice, with the fields enclosed by brackets "[]"
182 | replaced with your own identifying information. (Don't include
183 | the brackets!) The text should be enclosed in the appropriate
184 | comment syntax for the file format. We also recommend that a
185 | file or class name and description of purpose be included on the
186 | same "printed page" as the copyright notice for easier
187 | identification within third-party archives.
188 |
189 | Copyright [yyyy] [name of copyright owner]
190 |
191 | Licensed under the Apache License, Version 2.0 (the "License");
192 | you may not use this file except in compliance with the License.
193 | You may obtain a copy of the License at
194 |
195 | http://www.apache.org/licenses/LICENSE-2.0
196 |
197 | Unless required by applicable law or agreed to in writing, software
198 | distributed under the License is distributed on an "AS IS" BASIS,
199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 | See the License for the specific language governing permissions and
201 | limitations under the License.
--------------------------------------------------------------------------------
/src/ReactProfile.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useMemo, useState } from "react";
2 | import { Change, MODULES, ReactProfileProps, SUPPORTED_LANGUAGES, SendChange } from "./types";
3 | import { EDITOR_TEXT } from "./language";
4 | import { PixelsImage, getExportObject, getImageSource, EXPORT_OBJECT, FILTERS, PixelsImageSource } from "react-pixels";
5 | import ReactCrop, { ReactCropProps, type Crop, centerCrop, makeAspectCrop } from "react-image-crop";
6 | import {
7 | ICON_BRIGHTNESS,
8 | ICON_COLORS,
9 | ICON_CONTRAST,
10 | ICON_CROP,
11 | ICON_FILTER,
12 | ICON_FLIP,
13 | ICON_SATURATION,
14 | ICON_SPINNER,
15 | ICON_UNDO,
16 | } from "./icons";
17 |
18 | const DEFAULT_LANGUAGE: SUPPORTED_LANGUAGES = "en";
19 |
20 | const INIT_STATE: Change = {
21 | brightness: 0,
22 | contrast: 0,
23 | saturation: 0,
24 | verticalFlip: false,
25 | horizontalFlip: false,
26 | crop: undefined,
27 | filter: undefined,
28 | lastChangeTime: Date.now(),
29 | };
30 |
31 | const INIT_CROP: Crop = {
32 | unit: "%",
33 | width: 50,
34 | height: 50,
35 | x: 25,
36 | y: 25,
37 | };
38 |
39 | const MAX_IMAGE_WIDTH = 1000;
40 | const MAX_IMAGE_HEIGHT = 1000;
41 | const DEFAULT_OPTIMIZE = 0.8;
42 | const MAX_IMAGE_SIZE = 1024 * 1024 * 10; // 10MB
43 |
44 | const LAST_CHANGE_DELAY_MS = 1000;
45 |
46 | const DEFAULT_FILTERS_ENABLED: FILTERS[] = [
47 | "vintage",
48 | "perfume",
49 | "sunset",
50 | "wood",
51 | "greyscale",
52 | "coral",
53 | "lemon",
54 | "haze",
55 | "radio",
56 | "grime",
57 | "red_effect",
58 | "rgbSplit",
59 | ];
60 |
61 | const DEFAULT_MODULES: MODULES[] = ["crop", "filter", "colors"];
62 |
63 | const ReactProfile: React.FC = ({
64 | src,
65 | initCrop,
66 | cropOptions,
67 | square,
68 | filtersEnabled = DEFAULT_FILTERS_ENABLED,
69 | onCancel,
70 | onDone,
71 | maxWidth = MAX_IMAGE_WIDTH,
72 | maxHeight = MAX_IMAGE_HEIGHT,
73 | maxImageSize = MAX_IMAGE_SIZE,
74 | quality = DEFAULT_OPTIMIZE,
75 | modules = DEFAULT_MODULES,
76 | language = DEFAULT_LANGUAGE,
77 | type
78 | }) => {
79 | const moduleSet = [...new Set(modules)];
80 |
81 | INIT_STATE.crop = initCrop || INIT_CROP;
82 | cropOptions = square ? ({ ...cropOptions, aspect: 1 } as ReactCropProps) : cropOptions;
83 |
84 | const text = EDITOR_TEXT[language];
85 |
86 | const [close, setClose] = useState(false);
87 | const [actual, setActual] = useState(moduleSet[0]);
88 | const [history, setHistory] = useState([INIT_STATE]);
89 | const [edit, setEdit] = useState(INIT_STATE);
90 | const [exportObject, setExportObject] = useState();
91 | const [isExporting, setIsExporting] = useState(false);
92 | const [img, setImg] = useState();
93 | const [croppedSource, setCroppedSource] = useState();
94 | const [source, setSource] = useState();
95 | const [cropEdit, setCropEdit] = useState(INIT_STATE.crop);
96 | const pushHistory = (changes: SendChange) => {
97 | const last = history[history.length - 1];
98 | const change = { ...edit, ...changes, lastChangeTime: Date.now() };
99 | if (change.lastChangeTime - last.lastChangeTime > LAST_CHANGE_DELAY_MS) {
100 | setHistory([...history, change]);
101 | }
102 | setEdit(change);
103 | };
104 | const undo = () => {
105 | if (history.length > 1) {
106 | history.pop();
107 | setHistory(history);
108 | setEdit(history[history.length - 1]);
109 | setCropEdit(history[history.length - 1].crop as Crop);
110 | } else {
111 | setEdit(history[0]);
112 | }
113 | };
114 | const setFilter = (filter: string | undefined) => pushHistory({ filter });
115 | const setBrightness = (brightness: number) => pushHistory({ brightness });
116 | const setContrast = (contrast: number) => pushHistory({ contrast });
117 | const setSaturation = (saturation: number) => pushHistory({ saturation });
118 | const setVerticalFlip = (verticalFlip: boolean) => pushHistory({ verticalFlip });
119 | const setHorizontalFlip = (horizontalFlip: boolean) => pushHistory({ horizontalFlip });
120 | const setCrop = (crop: Crop) => pushHistory({ crop });
121 |
122 | const cancel = () => {
123 | setClose(true);
124 | if (onCancel) onCancel();
125 | else console.warn("ReactProfile: Missing onCancel handler");
126 | };
127 |
128 | const done = async () => {
129 | if (onDone) {
130 | setIsExporting(true);
131 | const sendCanvas = (canvas: HTMLCanvasElement, type: string) => {
132 | setIsExporting(false);
133 | setClose(true);
134 | onDone(getExportObject(canvas, type));
135 | };
136 |
137 | try {
138 | if (exportObject) {
139 | const canvas = getCroppedCanvas(true);
140 | if (!canvas) onDone();
141 | else sendCanvas(canvas, exportObject.getInferedMimetype());
142 | } else if (onDone) onDone();
143 | } catch (err) {
144 | console.error("ReactProfile: ", err);
145 | }
146 | } else {
147 | setClose(true);
148 | console.warn("ReactProfile: Missing onDone handler");
149 | }
150 | };
151 |
152 | const createCanvas = (): [HTMLCanvasElement, CanvasRenderingContext2D] => {
153 | const canvas = document.createElement("canvas");
154 | const ctx = canvas.getContext("2d");
155 | if (!ctx) throw new Error("ReactProfile: Error obtaining context");
156 | return [canvas, ctx];
157 | };
158 |
159 | const sourceToCanvas = (source: PixelsImageSource) => {
160 | if (source) {
161 | const [canvas, ctx] = createCanvas();
162 | canvas.width = source.width;
163 | canvas.height = source.height;
164 | ctx.putImageData(source.data, 0, 0);
165 | return canvas;
166 | }
167 | };
168 |
169 | const hasCrop = (crop?: Crop) => crop && crop.width > 0 && crop.height > 0;
170 |
171 | const getCroppedCanvas = (withChanges = false) => {
172 | const cr = edit.crop;
173 | if (cr && hasCrop(cr) && exportObject && source) {
174 | const sourceCanvas = withChanges ? exportObject.getCanvas() : sourceToCanvas(source);
175 | if (withChanges && actual !== "crop") return exportObject.getCanvas();
176 | if (sourceCanvas) {
177 | const [croppedCanvas, croppedContext] = createCanvas();
178 | const width = cr.unit === "%" ? sourceCanvas.width * (cr.width / 100) : cr.width;
179 | const height = cr.unit === "%" ? sourceCanvas.height * (cr.height / 100) : cr.height;
180 | const x = cr.unit === "%" ? sourceCanvas.width * (cr.x / 100) : cr.x;
181 | const y = cr.unit === "%" ? sourceCanvas.height * (cr.y / 100) : cr.y;
182 | croppedCanvas.width = width;
183 | croppedCanvas.height = height;
184 | croppedContext.drawImage(sourceCanvas, x, y, width, height, 0, 0, width, height);
185 | return croppedCanvas;
186 | }
187 | } else if (!hasCrop(cr) && exportObject && withChanges) return exportObject.getCanvas();
188 | else if (!hasCrop(cr) && !withChanges && source) return sourceToCanvas(source);
189 | };
190 |
191 | const getCroppedSource = async () => {
192 | if (exportObject) {
193 | if (!hasCrop(edit.crop)) return source;
194 | const canvas = getCroppedCanvas();
195 | if (canvas) return await getImageSource(canvas, exportObject.getInferedMimetype() || ("image/jpeg" as any));
196 | }
197 | };
198 |
199 | const loadImage = (image: HTMLImageElement, type: string) => {
200 | const [canvas, context] = createCanvas();
201 | let loadWidth = image.width;
202 | let loadHeight = image.height;
203 | const aspect = image.width / image.height;
204 | if (loadWidth > maxWidth) {
205 | loadWidth = maxWidth;
206 | loadHeight = loadWidth / aspect;
207 | }
208 | if (loadHeight > maxHeight) {
209 | loadHeight = maxHeight;
210 | loadWidth = loadHeight * aspect;
211 | }
212 | canvas.width = loadWidth;
213 | canvas.height = loadHeight;
214 | context.drawImage(image, 0, 0, loadWidth, loadHeight);
215 | canvas.toBlob(
216 | (blob) => {
217 | if (!blob) return console.error("ReactProfile: Error loading image");
218 | const pixelImage = new Image();
219 | pixelImage.src = URL.createObjectURL(blob);
220 | pixelImage.onload = () => setImg(pixelImage);
221 | pixelImage.onerror = () => console.error("ReactProfile: Error loading image");
222 | },
223 | type,
224 | quality
225 | );
226 | }
227 |
228 | useEffect(() => {
229 | if (src) {
230 | if(typeof src === "string") {
231 | const png = src.includes("png");
232 | const image = new Image();
233 | image.crossOrigin = "anonymous";
234 | image.src = src;
235 | image.onerror = () => console.error("ReactProfile: Error fetching image");
236 | image.onload = () => loadImage(image, type || png ? 'image/png' : 'image/jpeg')
237 | } else if (src instanceof HTMLImageElement) {
238 | loadImage(src, type || 'image/jpeg')
239 | } else if (src instanceof File) {
240 | if(src.type.startsWith("image/")) {
241 | const reader = new FileReader();
242 | reader.onload = (e) => {
243 | const img = new Image();
244 | if(e.target) {
245 | img.src = e.target.result as any;
246 | img.onload = () => loadImage(img, src.type);
247 | }
248 | }
249 | reader.readAsDataURL(src)
250 | }
251 | }
252 | }
253 | }, [src]);
254 |
255 | useEffect(() => {
256 | if (actual !== "crop") getCroppedSource().then((s) => s && setCroppedSource(s));
257 | }, [edit.crop, actual]);
258 |
259 | useEffect(() => {
260 | if(cropOptions && cropOptions.aspect === 1) {
261 | if(edit.crop && cropEdit && source && history) {
262 | if(source.width !== source.height && history.length === 1) {
263 | const newCrop: Crop = centerCrop(
264 | makeAspectCrop(
265 | {
266 | unit: '%',
267 | width: 50
268 | },
269 | 1,
270 | source.width,
271 | source.height
272 | ),
273 | source.width,
274 | source.height
275 | )
276 | setCropEdit(newCrop)
277 | const newEdit = { ...edit, crop: newCrop };
278 | history[0] = newEdit;
279 | setHistory(history);
280 | setEdit(newEdit);
281 | }
282 | }
283 | }
284 | }, [source]);
285 |
286 | useEffect(() => {
287 | if (img)
288 | getImageSource(img).then((source) => {
289 | if (source.data.data.byteLength >= maxImageSize) {
290 | const toMB = (len: number) => (len / (1024 * 1024)).toFixed(2);
291 | const err = `ReactProfile: Max Image Size Supported (>${toMB(maxImageSize)} MB). Image size: (${toMB(
292 | source.data.data.byteLength
293 | )} MB).`;
294 | console.error(err);
295 | console.warn(
296 | "ReactProfile: You can modify the maximum size with the 'maxImageSize' property, but be careful. Very large images can lead to errors or overloads."
297 | );
298 | throw new Error(err);
299 | } else {
300 | setSource(source);
301 | }
302 | });
303 | }, [img]);
304 |
305 | const IMAGE = useMemo(
306 | () =>
307 | source && (
308 |
319 | ),
320 | [
321 | edit.horizontalFlip,
322 | edit.verticalFlip,
323 | edit.filter,
324 | edit.contrast,
325 | edit.brightness,
326 | edit.saturation,
327 | actual,
328 | source,
329 | croppedSource,
330 | ]
331 | );
332 |
333 | const FILTERS = useMemo(
334 | () =>
335 | source &&
336 | actual === "filter" && (
337 |