img-cropper-normalizer v0.0.19
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 for polygon.
Usage
In your HTML, add the component:
<image-cropper></image-cropper>
Pass an image element and a predefined region for the cropper:
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, and getting the cropped image.
"detect": (source: string | HTMLImageElement | Blob | HTMLCanvasElement) => Promise<DetectedQuadResult[]>;
"getCroppedImage": (perspectiveTransform?: boolean, colorMode?: "binary" | "gray" | "color") => Promise<string>;
"getPoints": () => Promise<[Point, Point, Point, Point]>;
"getQuad": () => Promise<Quad>;
"getRect": () => Promise<Rect>;
Props:
"hidefooter"?: string; // hide the default footer with cancel and confirm buttons
"img"?: HTMLImageElement;
"license"?: string; // license for Dynamsoft Document Normalizer
"quad"?: Quad;
"rect"?: Rect;
Interfaces:
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;
}
You can customize the style of the selection with the following CSS:
--line-color:orange;
PS: If you need to use Dynamsoft Document Normalizer, please include it in your HTML's head:
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-document-normalizer@1.0.12/dist/ddn.js"></script>
Install this component
Script tag
Put a script tag similar to this
<script type="module"> import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/image-cropper-component/dist/esm/loader.js'; defineCustomElements(); </script>
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 img-cropper-component --save
Put a script tag similar to this
<script type="module"> import { defineCustomElements } from 'node_modules/img-cropper-component/dist/esm/loader.js'; defineCustomElements(); </script>
in the head of your index.html
Then you can use the element anywhere in your template, JSX, html etc
Serve, Publish
- npm run start -> serve on localhost:3333
- change Version in package.json -> npm run build -> npm publish
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago