From c38f71975d329c51bdab5aae026c04287b101ebe Mon Sep 17 00:00:00 2001 From: novacbn <31122674+novacbn@users.noreply.github.com> Date: Sun, 16 May 2021 10:52:01 -0400 Subject: [PATCH] - Added `ImageCrop#get_cropped_bounds(): IBounds | null` for getting the current selection bounds --- CHANGELOG.md | 5 +++++ README.md | 27 ++++++++++++++++++++------- package-lock.json | 4 ++-- package.json | 2 +- src/components/ImageCrop.svelte | 10 ++++++++++ 5 files changed, 38 insertions(+), 10 deletions(-) create mode 100644 CHANGELOG.md diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..5ae5d5e --- /dev/null +++ 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 index 7fa9f93..0ed61db 100644 --- 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,6 +112,12 @@ See a demo at [novacbn.github.io/svelte-image-crop/demo](https://novacbn.github. ``` +## 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 @@ -119,7 +125,7 @@ See a demo at [novacbn.github.io/svelte-image-crop/demo](https://novacbn.github. 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,11 +142,12 @@ 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 @@ -148,6 +155,12 @@ npm install github:novacbn/svelte-image-crop | ----------------------------------------- | --------------------------------------------------------- | | `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 index db29d03..3ddf79a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@novacbn/svelte-image-crop", - "version": "0.0.1", + "version": "0.0.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@novacbn/svelte-image-crop", - "version": "0.0.1", + "version": "0.0.2", "devDependencies": { "prettier": "^2.3.0", "svelte": "^3.38.2" diff --git a/package.json b/package.json index 739980f..569c7ab 100644 --- 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 index 66b33e6..2dbdf74 100644 --- 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 *