Cropt v2.0.16

Cropt is a modern, lightweight image cropper with zero dependencies.

v2 built on the awesome work by DevTheorem.

View Readme

Demos below and CodePen

Basic with external viewport adjusting:

Cropping from restored preset:

Rotation and resize handles enabled:

Code

  <head>
    <link rel="stylesheet" href="https://unpkg.com/cropt2@latest/style" />
  </head>
  <body>
    <div id="crop-demo"></div>
  </body>

Viewport border-radius

Viewport width

Viewport height

Mouse wheel zoom

Choose image

Why Cropt?

Built for developers who need powerful yet small footprint cropper. Built using modern javascript constructs.

Ultra Flexible

Minimal footprint, zero external dependencies, minimal DOM-manipulation for easy integration.

No Dependencies

Pure vanilla JavaScript, ready-shipped in a flexible npm package for use anywhere.

Component Ready

Full TypeScript support, and comes with sample components to use various frameworks.

Let's Go!

If you've reviewed the above examples, you're ready to use it: it's that simple! Load up your code editor and let's install it.

NPM

npm install cropt2

YARN

yarn add cropt2

USAGE EXAMPLE

import Cropt from 'cropt2';

const container = document.getElementById("container-id");
const image_url = "https://raw.githubusercontent.com/mindflowgo/cropt/refs/heads/master/docs/assets/photos/kitten.jpg";

const cropt = new Cropt(container);
cropt.bind(image_url)

console.log( `Crop area: `, cropt.get() )