Cropper.js

Cropper.js is a JavaScript image cropper. This repository contains the v2.x branch. If you require the older v1.x version, you must use the v1 branch of the repository.

For more information and live demonstrations, visit the official website.

Install the utility package using npm to access common constants and utility functions used across the Cropper ecosystem.

npm install @cropper/utils

Cropper.js 2.0 is a series of web components. You can use them in the DOM by importing the cropperjs package, which automatically defines all custom elements.

import 'cropperjs';

Once imported, you can use elements like <cropper-canvas>, <cropper-image>, <cropper-selection>, etc., directly in your HTML.

Install the @cropper/element package using npm to access the abstract class for constructing Cropper elements.

npm install @cropper/element

Install the @cropper/element-viewer package using npm to use the custom viewer element for the Cropper.

npm install @cropper/element-viewer

To use the custom elements for the Cropper, install the @cropper/elements package using npm.

npm install @cropper/elements

To create a custom Cropper element, extend the CropperElement class. You can define properties and override observedAttributes to react to attribute changes. Finally, call the $define() method to register your custom element with the browser.

import { CropperElement } from 'cropperjs';
// Or
// import CropperElement from '@cropper/element';

class MyCropperElement extends CropperElement {
  myStringProperty = '';
  myNumberProperty = NaN;
  myBooleanProperty = false;

  static get observedAttributes(): string[] {
    return super.observedAttributes.concat([
      'my-boolean-property',
      'my-number-property',
      'my-string-property',
    ]);
  }

  // ...
}

MyCropperElement.$define();

To use the custom elements in your application, you must import the necessary classes and call their $define() method to register them with the browser's Custom Element Registry.

Commonly used elements include:

• CropperElement: The base element.
• CropperCanvas: The canvas element.
• CropperImage: The image element.

import { CropperElement, CropperCanvas, CropperImage } from '@cropper/elements';

// You can extend the base element to create your own implementation
class MyCropperElement extends CropperElement {}

// Register the elements
MyCropperElement.$define();
CropperCanvas.$define();
CropperImage.$define();

To use the custom grid element for Cropper, install the package using npm:

npm install @cropper/element-gird

To use the custom selection element in your project, install the package using npm:

npm install @cropper/element-selection