https://github.com/tony-xlh/image-cropper-component
Image cropper web component built with Stencil.js
https://github.com/tony-xlh/image-cropper-component
Last synced: 5 months ago
JSON representation
Image cropper web component built with Stencil.js
- Host: GitHub
- URL: https://github.com/tony-xlh/image-cropper-component
- Owner: tony-xlh
- License: mit
- Created: 2023-06-06T09:41:06.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-27T12:32:50.000Z (8 months ago)
- Last Synced: 2024-11-09T01:40:05.301Z (5 months ago)
- Language: TypeScript
- Homepage: https://www.dynamsoft.com/codepool/image-cropper-web-component.html
- Size: 4.17 MB
- Stars: 9
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-stencil - Image Cropper Component - An image cropper web component that allows users to crop a rectangle or a 4-point polygon. (Components built with Stencil / Community)
- awesome-stencil - Image Cropper Component - An image cropper web component that allows users to crop a rectangle or a 4-point polygon. (Components built with Stencil / Community)
README
[](https://stenciljs.com)
# Image Cropper Component
An image cropper web component which allows users to crop a rectangle or a 4-point polygon. Perspective transformation is performed using [Dynamsoft Document Normalizer](https://www.dynamsoft.com/document-normalizer/docs/introduction/) for polygon. It supports editing multiple objects in one image.
[Demo video](https://github.com/tony-xlh/image-cropper-component/assets/5462205/754d7d39-d7a6-4a53-b17c-b1d83e399b5b)
Online demos:
* [Load an image to crop](https://candid-tarsier-04033c.netlify.app/)
* [Document scanner with camera](https://tony-xlh.github.io/ImageCapture-Document-Scanner/scanner.html)
### Usage
In your HTML, add the component:
```html
```
Pass an image element and a predefined region for the cropper:
```js
let cropper = document.querySelector("image-cropper");
cropper.img = document.getElementById("original");
cropper.rect = {x:50,y:50,width:200,height:200}; // or quadrilateral: cropper.quad = {points:[{x:50,y:50},{x:250,y:50},{x:250,y:250},{x:50,y:250}]};
```
It has several methods related to detecting document borders, getting the coordinates, getting the cropped image and updating the view.
```ts
"detect": (source: string | HTMLImageElement | Blob | HTMLCanvasElement) => Promise;
"getAllSelections": (convertTo?:"rect"|"quad") => Promise<(Quad|Rect)[]>;
"getCroppedImage": (options:CropOptions) => Promise;
"getPoints": () => Promise<[Point, Point, Point, Point]>;
"getQuad": () => Promise;
"getRect": () => Promise;
"resetStates": () => Promise;
"fitWidth": () => Promise;
"fitActualSize": () => Promise;
"fitWindow": () => Promise;
"goToTop": () => Promise;
```
Props:
```ts
"hidefooter"?: string; // hide the default footer with cancel and confirm buttons
"img"?: HTMLImageElement;
"license"?: string; // license for Dynamsoft Document Normalizer
"quad"?: Quad;
"rect"?: Rect;
"inactiveSelections": (Quad|Rect)[] // other selections which are not active
"draggingmode"?: "x-only"|"y-only"; //limit the direction for dragging
```
Interfaces:
```ts
export interface DetectedQuadResult{
location: Quad;
confidenceAsDocumentBoundary: number;
}
export interface Quad{
points:[Point,Point,Point,Point];
}
export interface Point{
x:number;
y:number;
}
export interface Rect{
x:number;
y:number;
width:number;
height:number;
}
export interface CropOptions {
perspectiveTransform?:boolean;
colorMode?:"binary"|"gray"|"color";
selection?:Quad|Rect;
/*
* use an external image source
*/
source?:Blob|string|HTMLImageElement|HTMLCanvasElement;
}
```
Events:
```ts
"onCanceled"?: (event: ImageCropperCustomEvent) => void;
"onConfirmed"?: (event: ImageCropperCustomEvent) => void;
"onSelectionClicked"?: (event: ImageCropperCustomEvent) => void;
"onImageLoaded"?: (event: ImageCropperCustomEvent) => void;
```
You can customize the style of the selection with the following CSS:
```css
--active-color: orange;
--inactive-color: orange;
--active-stroke: 5;
--inactive-stroke: 4;
```
PS: If you need to use Dynamsoft Document Normalizer, please include it in your HTML's head:
```html
```
## Pan and Zoom
You can use the wheel to zoom the image and pan the image with the mouse.
Pinch and zoom are also supported on touch devices.
## Install this component
### Script tag
- Put a script tag similar to this
```html
import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/image-cropper-component/dist/esm/loader.js';
defineCustomElements();
```
in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc
### Node Modules
- Run `npm install image-cropper-component --save`
- Put a script tag similar to this
```html
import { defineCustomElements } from 'node_modules/image-cropper-component/dist/esm/loader.js';
defineCustomElements();
```
in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc
## Credits
[Adding zoom and pan effects to SVG](https://onestepcode.com/zoom-pan-effect-svg/)