Croppie is a lightweight, pure JavaScript image cropping library designed for easy integration into web applications. As of April 2026, the current stable version is 2.6.5. Its release cadence is irregular, with patches and minor feature updates released periodically, often addressing bug fixes and introducing new capabilities like blob/canvas output or improved accessibility. Key differentiators include its small footprint, lack of external dependencies (historically not requiring jQuery, although a breaking change related to jQuery events was noted in v2.6.0), keyboard navigation support (since v2.2.0), and flexible output options including base64, raw canvas, and file blobs. A significant consideration is the project's explicit statement regarding the absence of automated tests, which implies a higher risk of regressions or unexpected behavior in new releases, as acknowledged in the v2.5.0 release notes.
npm install croppieVerified import paths — ran on the pinned version, not inferred.
Initializes Croppie on an HTML element, binds a remote image URL, configures a circular viewport, enables zoom with Ctrl key, and demonstrates retrieving the cropped image as a base64 string on button click.
Review and update any event handling code, especially if integrating Croppie with jQuery. Consult the documentation or changelog for specific event changes and their new implementation.
Thoroughly test Croppie functionality within your application after any update. Consider locking to specific patch versions (e.g., `~2.6.x`) to mitigate unexpected changes from minor releases.
Initialize Croppie with the option `mouseWheelZoom: 'ctrl'` to require the Ctrl key for zooming, allowing normal page scrolling when the key is not pressed. This feature was introduced in v2.6.0.
Ensure Croppie is updated to at least v2.4.0 to resolve known rendering and result retrieval issues with `enforceBoundary: false` in affected browsers.
Ensure all images processed by Croppie are served from the same origin as your application, or configure the image server with appropriate CORS headers (e.g., `Access-Control-Allow-Origin: *`). Alternatively, proxy images through your own backend server.
Ensure the `<script>` tag for `croppie.js` is correctly placed in your HTML (typically before your application script) or that `require('croppie')` is used in a CommonJS environment that correctly bundles the library.Verify that all images bound to Croppie are either served from the same domain as your web application, or that the image server is configured to send `Access-Control-Allow-Origin` headers that permit cross-origin access.
Initialize Croppie with the option `mouseWheelZoom: 'ctrl'` to require the Ctrl key to be pressed for mouse wheel zooming, allowing normal page scrolling otherwise.
Check the console for image loading errors. Ensure the image URL is valid and accessible. Verify `viewport` and `boundary` dimensions. If using an older version, update Croppie to at least v2.4.0 for improved browser compatibility and result reliability.
No dependency data recorded yet.