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. It supports editing multiple objects in one image.

Demo video

Online demos:

• Load an image to crop
• Document scanner with camera

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[]>;
"getAllSelections": (convertTo?:"rect"|"quad") => Promise<(Quad|Rect)[]>;
"getCroppedImage": (options:CropOptions) => 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;
"inactiveSelections": (Quad|Rect)[] // other selections which are not active

Interfaces:

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:

"onCanceled"?: (event: ImageCropperCustomEvent<void>) => void;
"onConfirmed"?: (event: ImageCropperCustomEvent<void>) => void;
"onSelectionClicked"?: (event: ImageCropperCustomEvent<number>) => void;

You can customize the style of the selection with the following 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:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/core.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/license.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ddn.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cvr.js"></script>

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

  <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 image-cropper-component --save

• Put a script tag similar to this

  <script type="module">
    import { defineCustomElements } from 'node_modules/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

Credits

Adding zoom and pan effects to SVG