pixedi 1.1.0 → 1.2.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 CHANGED
@@ -2,6 +2,18 @@
2
2
 
3
3
  All notable changes to this project will be documented in this file.
4
4
 
5
+ ## 1.2.1
6
+
7
+ - Fix resize reset when switch to other action.
8
+
9
+ ## 1.2.0
10
+
11
+ - Added a rotate tool with 90°, 180°, and 270° rotation options.
12
+ - Improved history management by relying on blob URLs.
13
+ - Added preview animations.
14
+ - Redesigned the crop rectangle.
15
+ - Expanded the settings with two new options: `saveAsWEBP` and `exportAs`.
16
+
5
17
  ## 1.1.0
6
18
 
7
19
  - Added a flip tool with horizontal and vertical mirroring and live preview.
package/README.md CHANGED
@@ -45,18 +45,39 @@ import { Pixedi } from "pixedi";
45
45
  import { Pixedi } from "pixedi";
46
46
 
47
47
  function App() {
48
+ return (
49
+ <div style={{ width: "100vw", height: "100vh" }}>
50
+ <Pixedi
51
+ image="https://example.com/photo.jpg"
52
+ onSave={async (image) => {
53
+ // image is a Blob by default, or a base64 data URI when
54
+ // settings.exportAs is "base64"
55
+ console.log(image);
56
+ }}
57
+ onBack={() => {
58
+ // Handle back/cancel action
59
+ console.log("User cancelled editing");
60
+ }}
61
+ />
62
+ </div>
63
+ );
64
+ }
65
+
66
+ function AppBase64() {
48
67
  return (
49
68
  <div style={{ width: "100vw", height: "100vh" }}>
50
69
  <Pixedi
51
70
  image="https://example.com/photo.jpg"
52
71
  onSave={async (base64) => {
53
- // Upload or persist the edited image
72
+ // Receives a base64 data URI: data:image/webp;base64,...
54
73
  console.log(base64);
55
74
  }}
56
75
  onBack={() => {
57
- // Handle back/cancel action
58
76
  console.log("User cancelled editing");
59
77
  }}
78
+ settings={{
79
+ exportAs: "base64",
80
+ }}
60
81
  />
61
82
  </div>
62
83
  );
@@ -65,11 +86,20 @@ function App() {
65
86
 
66
87
  ### Props
67
88
 
68
- | Prop | Type | Description |
69
- | -------- | ------------------------------------------- | ---------------------------------------------------------------------- |
70
- | `image` | `string` | URL or base64 data URI of the image to edit. |
71
- | `onSave` | `(base64: string) => void \| Promise<void>` | Called when the user clicks Save. Receives the edited image as base64. |
72
- | `onBack` | `() => void` | Called when the user clicks Back/Cancel. |
89
+ | Prop | Type | Description |
90
+ | ---------- | -------------------------------------------------- | --------------------------------------------------------------------------------------------- |
91
+ | `image` | `string` | URL or base64 data URI of the image to edit. |
92
+ | `onSave` | `(image: Blob \| string) => void \| Promise<void>` | Called when the user clicks Save. Receives the edited image as a `Blob` or a base64 data URI. |
93
+ | `onBack` | `() => void` | Called when the user clicks Back/Cancel. |
94
+ | `settings` | `Settings` | Optional editor settings (see below). |
95
+
96
+ ### Settings
97
+
98
+ | Setting | Type | Default | Description |
99
+ | ------------ | -------------------- | -------- | ----------------------------------------------------------------------------------------------- |
100
+ | `quality` | `number` | `0.85` | Output compression quality (`0`–`1`) for JPEG/WebP. |
101
+ | `saveAsWEBP` | `boolean` | `false` | Encode the final image as WebP. |
102
+ | `exportAs` | `"blob" \| "base64"` | `"blob"` | Pass the result to `onSave` as a `Blob` or as a base64 data URI (`data:<mimeType>;base64,...`). |
73
103
 
74
104
  ## Widget CDN
75
105
 
package/README.npm.md CHANGED
@@ -45,18 +45,39 @@ import { Pixedi } from "pixedi";
45
45
  import { Pixedi } from "pixedi";
46
46
 
47
47
  function App() {
48
+ return (
49
+ <div style={{ width: "100vw", height: "100vh" }}>
50
+ <Pixedi
51
+ image="https://example.com/photo.jpg"
52
+ onSave={async (image) => {
53
+ // image is a Blob by default, or a base64 data URI when
54
+ // settings.exportAs is "base64"
55
+ console.log(image);
56
+ }}
57
+ onBack={() => {
58
+ // Handle back/cancel action
59
+ console.log("User cancelled editing");
60
+ }}
61
+ />
62
+ </div>
63
+ );
64
+ }
65
+
66
+ function AppBase64() {
48
67
  return (
49
68
  <div style={{ width: "100vw", height: "100vh" }}>
50
69
  <Pixedi
51
70
  image="https://example.com/photo.jpg"
52
71
  onSave={async (base64) => {
53
- // Upload or persist the edited image
72
+ // Receives a base64 data URI: data:image/webp;base64,...
54
73
  console.log(base64);
55
74
  }}
56
75
  onBack={() => {
57
- // Handle back/cancel action
58
76
  console.log("User cancelled editing");
59
77
  }}
78
+ settings={{
79
+ exportAs: "base64",
80
+ }}
60
81
  />
61
82
  </div>
62
83
  );
@@ -65,11 +86,20 @@ function App() {
65
86
 
66
87
  ### Props
67
88
 
68
- | Prop | Type | Description |
69
- | -------- | ------------------------------------------- | ---------------------------------------------------------------------- |
70
- | `image` | `string` | URL or base64 data URI of the image to edit. |
71
- | `onSave` | `(base64: string) => void \| Promise<void>` | Called when the user clicks Save. Receives the edited image as base64. |
72
- | `onBack` | `() => void` | Called when the user clicks Back/Cancel. |
89
+ | Prop | Type | Description |
90
+ | ---------- | -------------------------------------------------- | --------------------------------------------------------------------------------------------- |
91
+ | `image` | `string` | URL or base64 data URI of the image to edit. |
92
+ | `onSave` | `(image: Blob \| string) => void \| Promise<void>` | Called when the user clicks Save. Receives the edited image as a `Blob` or a base64 data URI. |
93
+ | `onBack` | `() => void` | Called when the user clicks Back/Cancel. |
94
+ | `settings` | `Settings` | Optional editor settings (see below). |
95
+
96
+ ### Settings
97
+
98
+ | Setting | Type | Default | Description |
99
+ | ------------ | -------------------- | -------- | ----------------------------------------------------------------------------------------------- |
100
+ | `quality` | `number` | `0.85` | Output compression quality (`0`–`1`) for JPEG/WebP. |
101
+ | `saveAsWEBP` | `boolean` | `false` | Encode the final image as WebP. |
102
+ | `exportAs` | `"blob" \| "base64"` | `"blob"` | Pass the result to `onSave` as a `Blob` or as a base64 data URI (`data:<mimeType>;base64,...`). |
73
103
 
74
104
  ## Widget CDN
75
105