pixedi 1.5.1 → 1.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +9 -0
- package/README.md +43 -3
- package/README.npm.md +43 -3
- package/dist/lib/index.js +1423 -772
- package/dist/lib/index.umd.js +31 -3
- package/dist/widget/pixedi-widget.js +34 -6
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,15 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
|
|
5
|
+
## 1.6.1
|
|
6
|
+
|
|
7
|
+
- Bugfix, the Sidebar pop-left when change the crop resolution.
|
|
8
|
+
|
|
9
|
+
## 1.6.0
|
|
10
|
+
|
|
11
|
+
- Add filters tool.
|
|
12
|
+
- Fix `dark` theme.
|
|
13
|
+
|
|
5
14
|
## 1.5.1
|
|
6
15
|
|
|
7
16
|
- Replace tooltip prop `orientation` with `position`.
|
package/README.md
CHANGED
|
@@ -2,17 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
A lightweight, embeddable React image editor component.
|
|
4
4
|
|
|
5
|
-
`pixedi` provides a ready-to-use image editing UI with cropping, resizing, filters, horizontal/vertical flip, undo/redo, and social-media presets. It is built for React applications.
|
|
5
|
+
`pixedi` provides a ready-to-use image editing UI with cropping, resizing, image adjustments, predefined artistic filters, horizontal/vertical flip, rotation, undo/redo, and social-media size presets. It is built for React applications.
|
|
6
6
|
|
|
7
7
|
## Features
|
|
8
8
|
|
|
9
9
|
- Crop with free or fixed-ratio selection
|
|
10
10
|
- Resize by exact pixel dimensions
|
|
11
11
|
- Horizontal and vertical flip
|
|
12
|
-
-
|
|
12
|
+
- Rotation
|
|
13
|
+
- **Image filters** — two modes (see [Filters](#filters) below)
|
|
13
14
|
- Undo/redo history
|
|
14
15
|
- Social-media size presets (Facebook, Instagram, LinkedIn)
|
|
15
|
-
- React component
|
|
16
|
+
- React component and standalone UMD widget
|
|
16
17
|
- TypeScript declarations included
|
|
17
18
|
|
|
18
19
|
## Installation
|
|
@@ -104,6 +105,45 @@ function AppBase64() {
|
|
|
104
105
|
| `saveAsWEBP` | `boolean` | `false` | Encode the final image as WebP. |
|
|
105
106
|
| `exportAs` | `"blob" \| "base64"` | `"blob"` | Pass the result to `onSave` as a `Blob` or as a base64 data URI (`data:<mimeType>;base64,...`). |
|
|
106
107
|
|
|
108
|
+
## Filters
|
|
109
|
+
|
|
110
|
+
The Filters tool offers two modes, switchable via the toolbar toggle. Filter state is preserved in undo/redo history and baked into the image on save.
|
|
111
|
+
|
|
112
|
+
### CSS adjustments
|
|
113
|
+
|
|
114
|
+
Slider-based adjustments applied via CSS `filter`. Each slider affects only that property; the rest stay at their defaults.
|
|
115
|
+
|
|
116
|
+
| Filter | Range | Default |
|
|
117
|
+
| ---------- | ------ | ------- |
|
|
118
|
+
| Saturate | 0–200% | 100% |
|
|
119
|
+
| Grayscale | 0–100% | 0% |
|
|
120
|
+
| Sepia | 0–100% | 0% |
|
|
121
|
+
| Invert | 0–100% | 0% |
|
|
122
|
+
| Hue-Rotate | 0–360° | 0° |
|
|
123
|
+
| Brightness | 0–200% | 100% |
|
|
124
|
+
| Contrast | 0–200% | 100% |
|
|
125
|
+
|
|
126
|
+
### Predefined artistic filters
|
|
127
|
+
|
|
128
|
+
SVG-based filters selected from a dropdown. Each is a non-destructive preset applied as a single named filter.
|
|
129
|
+
|
|
130
|
+
| Filter | Description |
|
|
131
|
+
| ---------------- | ----------------------------------------------- |
|
|
132
|
+
| Vintage | Warm reddish tint with boosted reds |
|
|
133
|
+
| Olive Army | Desaturated olive-green tone |
|
|
134
|
+
| Warm Sunset | Boosted reds and oranges, reduced blues |
|
|
135
|
+
| Sin City Red | High-contrast red channel, grey everything else |
|
|
136
|
+
| Emboss Effect | Edge emboss with greyscale conversion |
|
|
137
|
+
| CRT Monitor | Scanline overlay simulating a CRT screen |
|
|
138
|
+
| Grain / Noise | Film-grain texture via fractal noise |
|
|
139
|
+
| Cross-Processing | Shifted colour curves for a lo-fi look |
|
|
140
|
+
| X-Ray | Inverted luminance, blue-green hue |
|
|
141
|
+
| Plastic Wrap | Specular highlight overlay |
|
|
142
|
+
|
|
143
|
+
### Compare mode
|
|
144
|
+
|
|
145
|
+
Click the Compare button in the filter toolbar to toggle a side-by-side before/after view. The original image is shown at full opacity while the comparison is active.
|
|
146
|
+
|
|
107
147
|
## Widget CDN
|
|
108
148
|
|
|
109
149
|
For non-React environments, use the standalone UMD widget from a CDN. See [`README.widget.md`](https://github.com/rastiv/pixedi/blob/main/README.widget.md) for full usage instructions, API reference, and examples.
|
package/README.npm.md
CHANGED
|
@@ -2,17 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
A lightweight, embeddable React image editor component.
|
|
4
4
|
|
|
5
|
-
`pixedi` provides a ready-to-use image editing UI with cropping, resizing, filters, horizontal/vertical flip, undo/redo, and social-media presets. It is built for React applications.
|
|
5
|
+
`pixedi` provides a ready-to-use image editing UI with cropping, resizing, image adjustments, predefined artistic filters, horizontal/vertical flip, rotation, undo/redo, and social-media size presets. It is built for React applications.
|
|
6
6
|
|
|
7
7
|
## Features
|
|
8
8
|
|
|
9
9
|
- Crop with free or fixed-ratio selection
|
|
10
10
|
- Resize by exact pixel dimensions
|
|
11
11
|
- Horizontal and vertical flip
|
|
12
|
-
-
|
|
12
|
+
- Rotation
|
|
13
|
+
- **Image filters** — two modes (see [Filters](#filters) below)
|
|
13
14
|
- Undo/redo history
|
|
14
15
|
- Social-media size presets (Facebook, Instagram, LinkedIn)
|
|
15
|
-
- React component
|
|
16
|
+
- React component and standalone UMD widget
|
|
16
17
|
- TypeScript declarations included
|
|
17
18
|
|
|
18
19
|
## Installation
|
|
@@ -104,6 +105,45 @@ function AppBase64() {
|
|
|
104
105
|
| `saveAsWEBP` | `boolean` | `false` | Encode the final image as WebP. |
|
|
105
106
|
| `exportAs` | `"blob" \| "base64"` | `"blob"` | Pass the result to `onSave` as a `Blob` or as a base64 data URI (`data:<mimeType>;base64,...`). |
|
|
106
107
|
|
|
108
|
+
## Filters
|
|
109
|
+
|
|
110
|
+
The Filters tool offers two modes, switchable via the toolbar toggle. Filter state is preserved in undo/redo history and baked into the image on save.
|
|
111
|
+
|
|
112
|
+
### CSS adjustments
|
|
113
|
+
|
|
114
|
+
Slider-based adjustments applied via CSS `filter`. Each slider affects only that property; the rest stay at their defaults.
|
|
115
|
+
|
|
116
|
+
| Filter | Range | Default |
|
|
117
|
+
| ---------- | ------ | ------- |
|
|
118
|
+
| Saturate | 0–200% | 100% |
|
|
119
|
+
| Grayscale | 0–100% | 0% |
|
|
120
|
+
| Sepia | 0–100% | 0% |
|
|
121
|
+
| Invert | 0–100% | 0% |
|
|
122
|
+
| Hue-Rotate | 0–360° | 0° |
|
|
123
|
+
| Brightness | 0–200% | 100% |
|
|
124
|
+
| Contrast | 0–200% | 100% |
|
|
125
|
+
|
|
126
|
+
### Predefined artistic filters
|
|
127
|
+
|
|
128
|
+
SVG-based filters selected from a dropdown. Each is a non-destructive preset applied as a single named filter.
|
|
129
|
+
|
|
130
|
+
| Filter | Description |
|
|
131
|
+
| ---------------- | ----------------------------------------------- |
|
|
132
|
+
| Vintage | Warm reddish tint with boosted reds |
|
|
133
|
+
| Olive Army | Desaturated olive-green tone |
|
|
134
|
+
| Warm Sunset | Boosted reds and oranges, reduced blues |
|
|
135
|
+
| Sin City Red | High-contrast red channel, grey everything else |
|
|
136
|
+
| Emboss Effect | Edge emboss with greyscale conversion |
|
|
137
|
+
| CRT Monitor | Scanline overlay simulating a CRT screen |
|
|
138
|
+
| Grain / Noise | Film-grain texture via fractal noise |
|
|
139
|
+
| Cross-Processing | Shifted colour curves for a lo-fi look |
|
|
140
|
+
| X-Ray | Inverted luminance, blue-green hue |
|
|
141
|
+
| Plastic Wrap | Specular highlight overlay |
|
|
142
|
+
|
|
143
|
+
### Compare mode
|
|
144
|
+
|
|
145
|
+
Click the Compare button in the filter toolbar to toggle a side-by-side before/after view. The original image is shown at full opacity while the comparison is active.
|
|
146
|
+
|
|
107
147
|
## Widget CDN
|
|
108
148
|
|
|
109
149
|
For non-React environments, use the standalone UMD widget from a CDN. See [`README.widget.md`](https://github.com/rastiv/pixedi/blob/main/README.widget.md) for full usage instructions, API reference, and examples.
|