explaingit

xyxiao001/vue-cropper

★ 4,567VueAudience · developerComplexity · 2/5Setup · easy

TLDR

A Vue 2 and Vue 3 component that adds interactive image cropping to a website. Users drag a selection box over a photo and the component exports just that area as a JPEG, PNG, or WebP image.

Mindmap

mindmap
  root((vue-cropper))
    Features
      Aspect ratio lock
      Scroll to zoom
      Real-time preview
    Output Formats
      JPEG
      PNG
      WebP
    Configuration
      Fixed or free crop
      Boundary constraints
      Rotation controls
    Integration
      Vue 2 and Vue 3
      npm install
      CDN option
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add a profile picture cropper to your Vue app that enforces a square aspect ratio before the user uploads an image.

USE CASE 2

Let users select and export a specific region of an uploaded photo as a PNG or JPEG in a Vue project.

USE CASE 3

Embed an image cropper in a Vue 3 form with real-time preview and rotation controls.

Tech stack

VueJavaScript

Getting it running

Difficulty · easy Time to first run · 5min

The author recommends the companion library cropper-next-vue for Vue 3 projects needing high-resolution export or advanced rotation.

In plain English

vue-cropper is a Vue component for adding image cropping functionality to websites. It supports both Vue 2 and Vue 3. The plugin adds an interactive cropping interface to a page: a user loads a photo, drags a selection box over the area they want to keep, and the plugin exports just that cropped portion as a new image. The component has many configuration options. You can control whether the crop box uses a fixed aspect ratio (useful for profile pictures that need to be square), whether the user can scale the image with the scroll wheel, what file format the cropped result exports to (JPEG, PNG, or WebP), and what quality level to use. The crop box can be constrained to stay within the image boundaries or allowed to move freely. A real-time preview feature shows what the final crop will look like as the user adjusts the selection. Installation is via npm with a single command, or the component can be loaded via a CDN link for projects that do not use a build tool. Placing it in a Vue template requires passing the image URL and output options as properties, and the component exposes methods to trigger cropping programmatically, rotate the image left or right, or clear the current selection. The README is written primarily in Chinese and links to an English version. The project also mentions a newer companion library called cropper-next-vue, which the author recommends for Vue 3 projects that need additional features like high-resolution export and real-time preview with rotation boundary detection.

Copy-paste prompts

Prompt 1
Add vue-cropper to my Vue 3 app so users can crop a profile photo to a 1:1 aspect ratio before uploading it.
Prompt 2
Show me how to use vue-cropper to crop an image and get the result as a base64-encoded PNG string in a Vue component.
Prompt 3
Help me configure vue-cropper so users can do a freeform crop with scroll-to-zoom enabled and no fixed ratio.
Prompt 4
Write a Vue 3 component using vue-cropper that shows a live crop preview and an export button that downloads the result.
Open on GitHub → Explain another repo

← xyxiao001 on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.