cropperjs

What is cropperjs?

CropperJS is a JavaScript library that provides a simple and easy-to-use interface for cropping images. It offers a variety of features such as zooming, rotating, and scaling images, making it a versatile tool for image manipulation in web applications.

What are cropperjs's main functionalities?

Basic Image Cropping

This feature allows you to crop an image with a specified aspect ratio. The `crop` event provides details about the cropping area, such as its position and dimensions.

const image = document.getElementById('image');
const cropper = new Cropper(image, {
  aspectRatio: 16 / 9,
  crop(event) {
    console.log(event.detail.x);
    console.log(event.detail.y);
    console.log(event.detail.width);
    console.log(event.detail.height);
    console.log(event.detail.rotate);
    console.log(event.detail.scaleX);
    console.log(event.detail.scaleY);
  },
});

Zooming

This feature allows you to zoom in and out of the image. The `zoom` event provides the current zoom ratio.

const cropper = new Cropper(image, {
  zoom(event) {
    console.log(event.detail.ratio);
  },
});

Rotating

This feature allows you to rotate the image by a specified degree. In this example, the image is rotated by 45 degrees.

cropper.rotate(45);

Scaling

This feature allows you to scale the image horizontally or vertically. In this example, the image is flipped horizontally.

cropper.scaleX(-1);

Other packages similar to cropperjs

react-image-crop

React Image Crop is a library specifically designed for React applications. It provides similar functionalities to CropperJS, such as image cropping and aspect ratio control. However, it is more tailored for use with React components, making it a better choice for React developers.

ngx-image-cropper

Ngx Image Cropper is an Angular library for cropping images. It offers similar features to CropperJS, including aspect ratio control and image manipulation. This package is more suitable for Angular applications, providing a seamless integration with Angular components.

vue-cropper

Vue Cropper is a Vue.js component for image cropping. It provides functionalities similar to CropperJS, such as zooming, rotating, and scaling images. This package is designed to work well within Vue.js applications, offering a more native experience for Vue developers.

README

Cropper.js

JavaScript image cropper.

Main npm package files

dist/
├── cropper.js         (UMD, bundled)
├── cropper.min.js     (UMD, bundled, compressed)
├── cropper.raw.js     (UMD, unbundled, default)
├── cropper.esm.js     (ECMAScript Module, bundled)
├── cropper.esm.min.js (ECMAScript Module, bundled, compressed)
├── cropper.esm.raw.js (ECMAScript Module, unbundled)
└── cropper.d.ts       (TypeScript Declaration File)

Getting started

Installation

npm install cropperjs

Usage

import Cropper from 'cropperjs';

const image = new Image();

image.src = '/path/to/image.jpg';

const cropper = new Cropper(image);

Versioning

Maintained under the Semantic Versioning guidelines.

License

MIT

Changelog

2.0.0 (2025-03-01)

• build: config issue template (649b2fa)
• build: prepare v2 stable version (ae55bdf)
• build: update dependencies (56cef09)
• build: update issue template for bug reports (dc09c90)
• build: update repo urls (2bee699)
• ci: update action version (0bb45db)
• docs(element-canvas): except the "scale" option for the event.detail.action of actionstart/move/ (c778cb6)