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.

Demo video

Online demo

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/[email protected]/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