@bensitu/image-editor 1.2.1 → 1.2.2
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/README.md +12 -26
- package/dist/image-editor.esm.js +1325 -763
- package/dist/image-editor.esm.js.map +3 -3
- package/dist/image-editor.esm.min.js +3 -8
- package/dist/image-editor.esm.min.js.map +3 -3
- package/dist/image-editor.esm.min.mjs +3 -8
- package/dist/image-editor.esm.min.mjs.map +3 -3
- package/dist/image-editor.esm.mjs +1325 -763
- package/dist/image-editor.esm.mjs.map +3 -3
- package/dist/image-editor.js +1325 -763
- package/dist/image-editor.js.map +3 -3
- package/dist/image-editor.min.js +2 -7
- package/dist/image-editor.min.js.map +3 -3
- package/image-editor.d.ts +29 -7
- package/package.json +1 -1
- package/src/image-editor.js +1344 -729
package/README.md
CHANGED
|
@@ -143,30 +143,33 @@ When creating the editor instance, you can pass an options object to override de
|
|
|
143
143
|
| `showPlaceholder` | `true` | Shows placeholder when no image is loaded |
|
|
144
144
|
| `initialImageBase64` | `null` | Base64 string to auto-load as initial image |
|
|
145
145
|
| `defaultDownloadFileName` | `edited_image.jpg` | Default file name for downloads |
|
|
146
|
-
| `crop.preserveMasksAfterCrop` | `false` |
|
|
146
|
+
| `crop.preserveMasksAfterCrop` | `false` | Keep masks that intersect the crop area, shifted into the cropped canvas. Merge masks first if they should be baked into the image pixels. |
|
|
147
147
|
|
|
148
148
|
## API Methods
|
|
149
149
|
|
|
150
150
|
| Method | Description |
|
|
151
151
|
|--------|-------------|
|
|
152
152
|
| `init(idMap)` | Bind the editor to DOM elements. Pass IDs in an object (optional). |
|
|
153
|
-
| `loadImage(
|
|
153
|
+
| `loadImage(imageBase64)` | Load an image from a base64 data string. Resolves after the Fabric image is on the canvas. |
|
|
154
154
|
| `scaleImage(factor)` | Scale image to the given factor (relative to base scale). |
|
|
155
155
|
| `rotateImage(degrees)` | Rotate image to the given angle in degrees. |
|
|
156
|
-
| `
|
|
157
|
-
| `undo()` | Undo the last state change. |
|
|
158
|
-
| `redo()` | Redo the next state change. |
|
|
159
|
-
| `
|
|
156
|
+
| `resetImageTransform()` | Reset scale to 1 and rotation to 0. |
|
|
157
|
+
| `undo()` | Undo the last state change. Resolves after the canvas state is restored. |
|
|
158
|
+
| `redo()` | Redo the next state change. Resolves after the canvas state is restored. |
|
|
159
|
+
| `createMask(config)` | Create a mask on the canvas. Config can include width, height, color. |
|
|
160
160
|
| `removeSelectedMask()` | Remove the currently selected mask. |
|
|
161
161
|
| `removeAllMasks()` | Remove all masks from the canvas. |
|
|
162
162
|
| `enterCropMode()` | Create a resizable/movable selection rect on top of the image. |
|
|
163
163
|
| `cancelCrop()` | Cancel crop mode and remove the temporary selection rect. |
|
|
164
164
|
| `applyCrop()` | Apply the current crop rectangle in the canvas. |
|
|
165
|
-
| `
|
|
165
|
+
| `mergeMasks()` | Merge masks with the base image in the canvas. |
|
|
166
166
|
| `downloadImage()` | Download the merged image as a file. |
|
|
167
|
-
| `
|
|
167
|
+
| `exportImageBase64(options)` | Export an image data URL. `fileType` can be `jpeg`, `png`, or `webp`. |
|
|
168
|
+
| `exportImageFile(options)` | Exports the current canvas (with or without masks) as a `File` object. `fileType` is exported directly when supported. |
|
|
168
169
|
|
|
169
|
-
|
|
170
|
+
Deprecated aliases are still available for compatibility: `reset()`, `addMask(config)`, `merge()`, and `getImageBase64(options)`.
|
|
171
|
+
|
|
172
|
+
By default, applying crop removes unmerged masks. Set `crop.preserveMasksAfterCrop` to keep intersecting masks, or use `mergeMasks()` before cropping when masks should become part of the image pixels.
|
|
170
173
|
|
|
171
174
|
## Example Workflow
|
|
172
175
|
|
|
@@ -206,23 +209,6 @@ The package build targets these modern browsers and uses modern DOM and JavaScri
|
|
|
206
209
|
|
|
207
210
|
IE11 and old mobile Safari are not supported by the distributed build. If you need them, transpile the package and provide any required DOM or JavaScript polyfills in your application.
|
|
208
211
|
|
|
209
|
-
## Automated npm Publishing
|
|
210
|
-
|
|
211
|
-
This repository publishes to npm through GitHub Actions when a matching version tag is pushed. The workflow uses npm Trusted Publishing with GitHub Actions OIDC, so no long-lived npm token is required.
|
|
212
|
-
|
|
213
|
-
Setup:
|
|
214
|
-
|
|
215
|
-
1. Configure npm Trusted Publishing for this repository and the `publish-npm.yml` workflow.
|
|
216
|
-
2. Commit the version bump, changelog, source, and generated `dist/` files.
|
|
217
|
-
3. Push a tag that matches the package version:
|
|
218
|
-
|
|
219
|
-
```bash
|
|
220
|
-
git tag v<package-version>
|
|
221
|
-
git push origin v<package-version>
|
|
222
|
-
```
|
|
223
|
-
|
|
224
|
-
The workflow validates the tag, runs checks, verifies package contents, and publishes to npm.
|
|
225
|
-
|
|
226
212
|
## Dependencies
|
|
227
213
|
|
|
228
214
|
- **fabric.js v5.x** — Must be loaded before ImageEditor
|