vue-cropper is a Vue component for image cropping that supports both Vue 2 and Vue 3.
The tool solves the problem of integrating image cropping functionality into Vue applications. It provides an interactive interface where users can select a crop region within an image, adjust its position and size, and export the cropped result. The component handles image scaling via mouse wheel, allows dragging of both the image and the crop box, and supports multiple output formats and quality settings. It can work with image URLs, base64 data, or blob objects.
Developers building Vue applications that need image cropping should consider this tool. It suits projects requiring straightforward image editing without heavy dependencies. The README notes that Vue 3 users are recommended to use a separate repository, cropper-next-vue, which is independently maintained and offers additional features including boundary detection after rotation, constraints to keep images within the crop frame or container, high-DPI export, and real-time preview. The original vue-cropper remains available for Vue 2 projects and Vue 3 projects that prefer this implementation. The tool provides extensive configuration through props including output quality and format, fixed aspect ratios, automatic crop box generation, and device pixel ratio handling. Callbacks are available for real-time preview updates, image movement, crop box movement, and image load status.
The project maintains active development with updates documented in a changelog. The repository includes online demonstrations and comprehensive documentation covering installation methods for different Vue versions, including CDN usage and Nuxt integration. The maintainers have identified a known issue where mock services can interfere with image conversion and recommend disabling them during use.
