- Added ImageCrop#get_cropped_bounds(): IBounds | null for getting …

…the current selection bounds
novacbn · May 16, 2021 · c38f719 · c38f719
1 parent a6580eb
commit c38f719
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,5 @@
+# CHANGELOG
+
+## 0.0.2 - 2021/05/16
+
+-   Added `ImageCrop#get_cropped_bounds(): IBounds | null` for getting the current selection bounds
diff --git a/README.md b/README.md
@@ -20,7 +20,7 @@ See a demo at [novacbn.github.io/svelte-image-crop/demo](https://novacbn.github.
 -   Chrome 56+ — Jan 2017
 -   Edge 79+ — Jan 2020
 -   Firefox 46+ — April 2016
--   Safari **UNSUPPORTED** — Requires [createImageBitmap](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap) and [canvas.getContext("bitmaprenderer")](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext)
+-   Safari **UNSUPPORTED** — Requires [`createImageBitmap`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap) and [`canvas.getContext("bitmaprenderer")`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext)
 
 ## Usage
 
@@ -112,14 +112,20 @@ See a demo at [novacbn.github.io/svelte-image-crop/demo](https://novacbn.github.
 </button>
 ```
 
+## FAQ
+
+### Can the Package Be Used on Unsupported Browsers?
+
+Yes! The Browser support is only for calling [`get_cropped_image`](#methods) for performing cropping via Web APIs. However you can call [`get_cropped_bounds`](#methods) to get the starting `x` and `y` coordinates along with the `width` and `height` relative to the image's actual _(not Browser element)_ dimensions. Which you can manually pass into some other package that handles manipulating image data or send to a server backend.
+
 ## Developer
 
 ### Installation
 
 Open your terminal and install via `npm`:
 
 ```bash
-npm install github:novacbn/svelte-image-crop#0.0.1
+npm install github:novacbn/svelte-image-crop#0.0.2
 ```
 
 Install current in-development code:
@@ -136,18 +142,25 @@ npm install github:novacbn/svelte-image-crop
 
 ### Methods
 
-| Signature                   | Description                                                                                |
-| --------------------------- | ------------------------------------------------------------------------------------------ |
-| `get_cropped_image(): Blob` | Returns a copy of the currently loaded image as a `Blob`, but cropped to current selection |
-| `is_cropping(): boolean`    | Returns if there is an active crop selection                                               |
-| `reset(): void`             | Removes the the currently active crop selection                                            |
+| Signature                               | Description                                                                                |
+| --------------------------------------- | ------------------------------------------------------------------------------------------ |
+| `get_cropped_bounds(): IBounds OR null` | Returns the current crop selection bounds relative to the actual image dimensions          |
+| `get_cropped_image(): Blob`             | Returns a copy of the currently loaded image as a `Blob`, but cropped to current selection |
+| `is_cropping(): boolean`                | Returns if there is an active crop selection                                               |
+| `reset(): void`                         | Removes the the currently active crop selection                                            |
 
 ### Events
 
 | Signature                                 | Description                                               |
 | ----------------------------------------- | --------------------------------------------------------- |
 | `state: CustomEvent<{state: CROP_STATE}>` | Dispatches whenever the current crop editor state changes |
 
+### Types
+
+| Signature                                                           | Description                                      |
+| ------------------------------------------------------------------- | ------------------------------------------------ |
+| `IBounds: { x: number; y: number; width: number; height: number; }` | Represents a set of boundaries within a 2D plane |
+
 ### CSS Variables
 
 | Name                                      | Default                          | Description                                                                         |

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
     "name": "@novacbn/svelte-image-crop",
     "description": "Simple click'n'drag Image Cropping using Web APIs",
     "author": "novacbn",
-    "version": "0.0.1",
+    "version": "0.0.2",
     "keywords": [
         "image-crop",
         "svelte",

diff --git a/src/components/ImageCrop.svelte b/src/components/ImageCrop.svelte
@@ -126,6 +126,16 @@
         return blob;
     }
 
+    /**
+     * Returns the current crop selection bounds relative to the image dimensions
+     *
+     * @returns {import("../util/math").IBounds | null}
+     */
+    export function get_cropped_bounds() {
+        // NOTE: Need to clone to prevent mutation to internal state
+        return _image_bounds ? {..._image_bounds} : null;
+    }
+
     /**
      * Returns if there is an active crop selection
      *