Cropper.js

Try it in 3 steps

1. 1

   Install Cropper.js 2.2.0

   Pin the stable v2 release so the example is not mixed with the older v1 API.

   npm install --save-exact cropperjs@2.2.0Copy
2. 2

   Create a Cropper from an image element

   Follow the official API by passing the target HTMLImageElement to the Cropper constructor.

   import Cropper from 'cropperjs'; const image = document.querySelector('#image'); const cropper = new Cropper(image);Copy
3. 3

   Convert the selection to a Canvas

   In v2, use the <cropper-selection> $toCanvas() method instead of the old getCroppedCanvas() API.

   const selection = cropper.getCropperSelection(); const canvas = await selection?.$toCanvas();Copy

Built with

• TypeScript
• JavaScript

Categories and tags

GitHub data

Share a guide or use case for this OSS in Markdown. Articles are published after administrator approval.

Explore next

• SortableJS31,186 Stars

  4 shared tag(s)

  reorder list items with drag and drop within or across lists while supporting touch input

  JavaScript
• SweetAlert218,098 Stars

  4 shared tag(s)

  replace alert, confirm, and prompt dialogs with WAI-ARIA-aware popups that resolve through Promises

  JavaScript
• Tippy.js12,240 Stars

  4 shared tag(s)

  position tooltips, popovers, and dropdowns with Popper and attach them to hover, focus, or click interactions

  JavaScript
• melonJS6,401 Stars

  4 shared tag(s)

  Build browser-based 2D and 2.5D games through one API across WebGPU, WebGL 2, and Canvas

  JavaScript
• Motion33,834 Stars

  3 shared tag(s) · 1 shared category(s) · Same language

  build web animation with gestures, springs, layout transitions, scroll effects, and timelines across React, JavaScript, and Vue

  TypeScript
• Video.js39,907 Stars

  3 shared tag(s) · 1 shared category(s)

  add a shared player UI and API to HTML5 video, including web streaming formats such as HLS and DASH

  JavaScript