Originally based on Foliotek/Croppie, but rewritten as a modern ES module with a simpler API, higher quality image scaling, and numerous other improvements.

npm install cropt

1. Include the src/cropt.css stylesheet on your page.
2. Add a div element to your HTML to hold the Cropt instance.
3. Import Cropt and bind it to an image:

import { Cropt } from "cropt";

let c = new Cropt(document.getElementById('demo'), options);
c.bind("path/to/image.jpg");

The Cropt boundary defaults to 320px wide and 320px high. To customize this, override the .cropt-container .cr-boundary width and height via CSS.

Type: "off" | "on" | "ctrl"
Default value: "on"

If set to "off", the mouse wheel cannot be used to zoom in and out of the image. If set to "ctrl", the mouse wheel will only zoom in and out while the CTRL key is pressed.

Type: { width: number, height: number, borderRadius: string }
Default value: { width: 220, height: 220, borderRadius: "0px" }

Defines the size and shape of the crop box. For a circle shape, set the border radius to "50%".

Type: string
Default value: "cr-slider"

Optionally set a different class on the zoom range input to customize styling (e.g. set to "form-range" when using Bootstrap).

Takes an image URL as the first argument, and an optional initial zoom value. Returns a Promise which resolves when the image has been loaded and state is initialized.

Deconstructs a Cropt instance and removes the elements from the DOM.

Recalculate points for the image. Necessary if the instance was initially bound to a hidden element.

Returns a Promise resolving to an HTMLCanvasElement object for the cropped image. If size is specified, the cropped image will be scaled with its longest side set to this value.

Returns a Promise resolving to a Blob object for the cropped image. If size is specified, the cropped image will be scaled with its longest side set to this value. The type and quality parameters are passed directly to the corresponding HTMLCanvasElement.toBlob() method parameters.

Allows options to be dynamically changed on an existing Cropt instance.

Set the zoom of a Cropt instance. The value must be between 0 and 1, and is restricted to the min/max set by Cropt.

Cropt is dependent on its container being visible when the bind method is called. This can be an issue when your component is inside a modal that isn't shown. Consider the Bootstrap modal, for example:

const cropEl = document.getElementById('my-cropt');
const c = new Cropt(cropEl, opts);
const myModal = document.getElementById('my-modal');

myModal.addEventListener('shown.bs.modal', () => {
    c.bind("my/image.jpg");
});

If you have issues getting the correct result, and your Cropt instance is shown inside a modal, try taking it out of the modal and see if the issue persists. If not, make sure that your bind method is called after the modal finishes opening.

If a Cropt instance needs to be hidden and then re-shown, call the refresh() method to recalculate properties for the displayed image.

Cropt is tested in the following browsers:

• Firefox
• Safari
• Chrome
• Edge

Cropt should also work in any other modern browser using an engine based on Gecko, WebKit, or Chromium.

MIT