Vue Cropper

https://github.com/xyxiao001/vue-cropper
Admin
Vue Cropper is an elegant image cropping plugin for Vue.js applications, supporting both Vue 2 and...
Tokens:28,124
Snippets:322
Trust Score:9.7
License:MIT
Update:2 months ago
Show doc for...
Tokens:
Raw
### Plugin Installation Pattern

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/module-exports.md

Standard Vue plugin installation using Vue.use().

```javascript
import Vue from 'vue'
import VueCropper from 'vue-cropper'

Vue.use(VueCropper)
// Now available as <VueCropper /> in templates
```

--------------------------------

### Vue 2 Installation

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/api-quick-reference.md

Standard installation pattern for Vue 2 applications.

```javascript
export { VueCropper }
export default {
  version: '0.6.5',
  install: function(Vue),
  VueCropper: VueCropper,
  vueCropper: VueCropper  // deprecated
}
```

```javascript
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)
```

--------------------------------

### Import and register VueCropper

Source: https://github.com/xyxiao001/vue-cropper/blob/main/english.md

Demonstrates component registration and plugin installation for different environments.

```javascript
import { VueCropper }  from vue-cropper 
components: {
  VueCropper,
},

main.js
import VueCropper from vue-cropper 

Vue.use(vueCropper)

cdn
<script src="vuecropper.js"></script>
Vue.use(window['vue-cropper'])
```

--------------------------------

### Vue 3 Installation

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/api-quick-reference.md

Standard installation pattern for Vue 3 applications using the next/lib/index.ts entry point.

```typescript
export const globalCropper: vueCropperGlobal
export { VueCropper }
export default globalCropper
```

```typescript
import { globalCropper } from 'vue-cropper'
app.use(globalCropper)
```

--------------------------------

### Install vue-cropper

Source: https://github.com/xyxiao001/vue-cropper/blob/main/english.md

Use npm or yarn to add the package to your project dependencies.

```bash
npm install vue-cropper
yarn add vue-cropper
```

--------------------------------

### Installing as a Global Plugin

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/module-exports.md

Registers the component globally using the app.use() method.

```typescript
import { createApp } from 'vue'
import { globalCropper } from 'vue-cropper'
// or: import VueCropper from 'vue-cropper'

const app = createApp(App)
app.use(globalCropper)
// Now available as <VueCropper /> in all templates
app.mount('#app')
```

--------------------------------

### Vue 3 Import Patterns

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/api-quick-reference.md

Demonstrates global, local, and script setup registration for Vue 3.

```typescript
// Global
import { globalCropper } from 'vue-cropper'
app.use(globalCropper)

// Local
import { VueCropper } from 'vue-cropper'
components: { VueCropper }

// Script Setup
import { VueCropper } from 'vue-cropper'
const cropper = ref()
```

--------------------------------

### Configure vue-cropper

Source: https://github.com/xyxiao001/vue-cropper/blob/main/english.md

Examples for importing the component in views, registering it globally in main.js, and using it via CDN.

```javascript
views

import { VueCropper }  from "vue-cropper"
components: {
  VueCropper,
},

main.js

import VueCropper from "vue-cropper" 

Vue.use(VueCropper)

cdn
<script src="vuecropper.js"></script>
Vue.use(window['vue-cropper'])

<vueCropper
  ref="cropper"
  :img="option.img"
  :outputSize="option.size"
  :outputType="option.outputType"
></vueCropper>
```

--------------------------------

### Auto-Crop Configuration Patterns

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/usage-patterns.md

Examples for initializing the cropper with automatic crop box generation, either using default dimensions or specific pixel sizes.

```vue
<VueCropper
  :img="imageUrl"
  :autoCrop="true"
/>
```

```vue
<VueCropper
  :img="imageUrl"
  :autoCrop="true"
  :autoCropWidth="400"
  :autoCropHeight="300"
/>
```

--------------------------------

### Install Vue-Cropper for Vue 2

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/configuration.md

Global registration of the VueCropper component for Vue 2 applications.

```javascript
import Vue from 'vue'
import VueCropper from 'vue-cropper'

Vue.use(VueCropper)  // No options available
```

--------------------------------

### Install Vue-Cropper for Vue 3

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/configuration.md

Global registration methods for Vue 3 applications using either app.use or direct component registration.

```javascript
import { createApp } from 'vue'
import { globalCropper } from 'vue-cropper'

const app = createApp(App)

// Method 1: Default export
app.use(globalCropper)  // No options available

// Method 2: Direct component registration
import { VueCropper } from 'vue-cropper'
app.component('VueCropper', VueCropper)
```

--------------------------------

### Default Export

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/module-exports.md

The default export object containing the version, install function, and component references.

```javascript
export default {
  version: '0.6.5',
  install: function(Vue),
  VueCropper: VueCropper,
  vueCropper: VueCropper
}
```

--------------------------------

### Vue 2 Global Plugin Setup

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/usage-patterns.md

Register the plugin globally in the main entry file to make the component available throughout the application.

```javascript
// main.js
import Vue from 'vue'
import VueCropper from 'vue-cropper'

Vue.use(VueCropper)

new Vue({
  el: '#app',
  render: h => h(App)
})
```

```vue
<template>
  <div>
    <VueCropper ref="cropper" :img="imageUrl" />
  </div>
</template>

<script>
export default {
  data() {
    return { imageUrl: '' }
  }
}
</script>
```

--------------------------------

### VueCropper Plugin API

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/module-exports.md

The default export provides the plugin installation method and component references for Vue 2.

```APIDOC
## VueCropper Plugin API

### Description
The default export of the `vue-cropper` package provides the necessary methods to register the component globally or import it for local use.

### Exports
- **version** (String) - The current version of the plugin (e.g., '0.6.5').
- **install** (Function) - The plugin install function used by `Vue.use()`. Registers the component globally.
- **VueCropper** (Vue.Component) - The VueCropper component constructor.

### Usage Example
```javascript
import Vue from 'vue';
import VueCropper from 'vue-cropper';

// Global registration
Vue.use(VueCropper);

// Named import for local registration
import { VueCropper } from 'vue-cropper';
```
```

--------------------------------

### Optimize Vue 2 Tree-Shaking

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/module-exports.md

Use named imports to avoid including the install function and version info in the bundle.

```javascript
import { VueCropper } from 'vue-cropper'
```

--------------------------------

### Configure mode prop values

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/configuration.md

Examples of setting the mode property to control image layout behavior using CSS background-size patterns.

```javascript
mode: "contain"        // Fit in container (default)
mode: "cover"          // Fill container
mode: "500px"          // Fix width to 500px
mode: "500px 400px"    // Fix both dimensions
mode: "80%"            // 80% of container width
mode: "auto 300px"     // Auto-width, 300px height
```

--------------------------------

### Vue 3 Global Plugin Setup

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/usage-patterns.md

Register the plugin globally in a Vue 3 application, ensuring the required CSS is imported.

```typescript
// main.ts
import { createApp } from 'vue'
import { globalCropper } from 'vue-cropper'
import 'vue-cropper/dist/index.css'

const app = createApp(App)
app.use(globalCropper)
app.mount('#app')
```

--------------------------------

### Implement @img-moving Event Handling

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/events-api.md

Example of binding the @img-moving event to a VueCropper component and handling the emitted data in the component methods.

```vue
<template>
  <div class="container">
    <VueCropper
      :img="imageUrl"
      :canMove="true"
      @img-moving="onImgMoving"
    />
    
    <div class="info">
      Status: {{ imgMoving ? 'Moving' : 'Ready' }}
      <div v-if="imgAxis">
        Left: {{ imgAxis.x1 }}, Top: {{ imgAxis.y1 }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgMoving: false,
      imgAxis: null
    }
  },
  methods: {
    onImgMoving(data) {
      this.imgMoving = data.moving
      this.imgAxis = data.axis
      
      if (data.moving) {
        // Image is being dragged
      } else {
        // Drag operation completed
        console.log('Final position:', data.axis)
      }
    }
  }
}
</script>
```

--------------------------------

### Implementing @crop-moving in Vue Component

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/events-api.md

Example of binding the @crop-moving event to a VueCropper component and handling the emitted data.

```vue
<template>
  <div class="container">
    <VueCropper
      :img="imageUrl"
      :canMoveBox="true"
      @crop-moving="onCropMoving"
    />
    
    <div class="crop-info">
      <p v-if="cropAxis">
        Crop Box Position:
        X: {{ cropAxis.x1 }} - {{ cropAxis.x2 }}
        Y: {{ cropAxis.y1 }} - {{ cropAxis.y2 }}
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cropMoving: false,
      cropAxis: null
    }
  },
  methods: {
    onCropMoving(data) {
      this.cropMoving = data.moving
      this.cropAxis = data.axis
      
      if (!data.moving) {
        // Store final position when move completes
        this.storeCropPosition(data.axis)
      }
    },
    storeCropPosition(axis) {
      console.log('Crop box final position:', axis)
    }
  }
}
</script>
```

--------------------------------

### Register Vue Cropper Plugin

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/types.md

Example of registering the Vue Cropper plugin in a Vue 3 application using the globalCropper instance.

```typescript
import { globalCropper } from 'vue-cropper'
import type { vueCropperGlobal } from 'vue-cropper'

const app = createApp(App)
const plugin: vueCropperGlobal = globalCropper

app.use(plugin)
app.mount('#app')
```

--------------------------------

### Vue 3 Local Component Registration

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/usage-patterns.md

Use the composition API with script setup to register the component locally in Vue 3.

```vue
<template>
  <VueCropper ref="cropper" :img="imageUrl" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { VueCropper } from 'vue-cropper'

const imageUrl = ref('')
const cropper = ref()
</script>
```

--------------------------------

### Implement Real-Time Preview

Source: https://github.com/xyxiao001/vue-cropper/blob/main/english.md

Use the realTime event to capture preview data and bind it to a container for live image cropping feedback.

```html
realTime (data) {
  this.previews = data
}
<div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden',
    'margin': '5px'}">
  <div :style="previews.div">
    <img :src="previews.url" :style="previews.img">
  </div>
</div>
```

```html
@realTime="realTime"
// Real time preview function
realTime (data) {
  this.previews = data
}
<div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden',
    'margin': '5px'}">
  <div :style="previews.div">
    <img :src="option.img" :style="previews.img">
  </div>
</div>
```

--------------------------------

### Get Cropped Image Data

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/api-quick-reference.md

Retrieves the cropped image as a Base64 data URL.

```javascript
ref.getCropData(dataUrl => {
  // Use or save dataUrl
})
```

--------------------------------

### startCrop()

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/api-reference-vue-cropper-component.md

Enables crop mode, allowing the user to draw a crop box on the image.

```APIDOC
## startCrop()

### Description
Enable crop mode. Once called, the user can draw a crop box by clicking and dragging on the image.

### Returns
- `undefined`
```

--------------------------------

### Get Crop Box Coordinates

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/api-reference-vue-cropper-component.md

Retrieves the current crop box boundaries relative to the container.

```javascript
this.$refs.cropper.getCropAxis()
```

```javascript
const cropAxis = this.$refs.cropper.getCropAxis()
console.log(cropAxis) // { x1: 50, x2: 450, y1: 100, y2: 400 }
```

--------------------------------

### Get Image Axis Coordinates

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/api-reference-vue-cropper-component.md

Retrieves the current image position and scale relative to the container.

```javascript
this.$refs.cropper.getImgAxis(x, y, scale)
```

```javascript
const axis = this.$refs.cropper.getImgAxis()
console.log(axis) // { x1: 10, x2: 510, y1: 20, y2: 520 }
```

--------------------------------

### Implement Real-Time Preview

Source: https://github.com/xyxiao001/vue-cropper/blob/main/english.md

Use the @realTime event to update preview dimensions and display the cropped area in real-time.

```html
@realTime="realTime"
// Real time preview function
realTime (data) {
  this.previews = data
}
<div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden',
    'margin': '5px'}">
  <div :style="previews.div">
    <img :src="option.img" :style="previews.img">
  </div>
</div>
```

--------------------------------

### globalCropper Plugin

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/module-exports.md

The plugin object used to install Vue Cropper into a Vue 3 application instance.

```APIDOC
## globalCropper Plugin

### Description
The `globalCropper` object is a Vue plugin that registers the `VueCropper` component globally when passed to `app.use()`.

### Properties
- **version** (string) - Current version of the plugin.
- **install** (Function) - The installation function called by `app.use()`.
- **VueCropper** (Component) - The component constructor.
```

--------------------------------

### Vue 2 Import Patterns

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/api-quick-reference.md

Demonstrates global registration and local component import for Vue 2.

```javascript
// Global
import Vue from 'vue'
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)

// Local
import { VueCropper } from 'vue-cropper'
components: { VueCropper }
```

--------------------------------

### Importing VueCropper

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/module-exports.md

Shows the available import paths for the VueCropper component.

```javascript
// Import path: 'vue-cropper'
import VueCropper from 'vue-cropper'
import { VueCropper } from 'vue-cropper'
```

--------------------------------

### Importing VueCropper Modules

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/module-exports.md

Demonstrates the available named and default imports from the package.

```typescript
// Import path: 'vue-cropper@next' or 'vue-cropper' (v1.x)
import { VueCropper } from 'vue-cropper'
import { globalCropper } from 'vue-cropper'
import VueCropper from 'vue-cropper'
```

--------------------------------

### Configuration Presets

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/api-quick-reference.md

Common configuration objects for different cropping requirements.

```javascript
fixed: true
fixedNumber: [1, 1]
autoCrop: true
autoCropWidth: 300
autoCropHeight: 300
```

```javascript
fixed: true
fixedNumber: [16, 9]
mode: 'cover'
enlarge: 1.5
```

```javascript
fixed: false
autoCrop: true
canMove: true
canMoveBox: true
```

```javascript
fixed: true
fixedNumber: [3, 4]
outputSize: 0.7
outputType: 'jpeg'
limitMinSize: 100
```

--------------------------------

### Get Cropped Image Data

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/api-reference-vue-cropper-component.md

Retrieves the cropped image as a base64 data URL via a callback function.

```javascript
this.$refs.cropper.getCropData(callback)
```

```javascript
this.$refs.cropper.getCropData(data => {
  console.log(data) // "data:image/jpeg;base64,/9j/4AAQSkZJRg..."
  // Send to server or use as image source
  const img = new Image()
  img.src = data
})
```

--------------------------------

### Importing VueCropper via Node Module Resolution

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/module-exports.md

Use standard imports to resolve the main entry point defined in package.json. Append @next for Vue 3 specific builds.

```javascript
// Resolves to dist/index.js (main field in package.json)
import VueCropper from 'vue-cropper'

// For Vue 3, explicitly request the next build
import VueCropper from 'vue-cropper@next'
```

--------------------------------

### Define vueCropperGlobal Interface

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/types.md

The global plugin interface for Vue Cropper, defining the version, install function, and component constructor.

```typescript
interface vueCropperGlobal {
  version: string
  install: (app: App) => void
  VueCropper: typeof VueCropper
}
```

--------------------------------

### Default Configuration

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/configuration.md

Uses all default settings, including manual crop box creation and free aspect ratio.

```vue
<VueCropper
  :img="imageUrl"
/>
```

--------------------------------

### Configure web gallery image

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/configuration.md

Uses a 16:9 aspect ratio with WebP output and cover mode for gallery displays.

```javascript
{
  fixed: true,
  fixedNumber: [16, 9],
  autoCrop: true,
  mode: 'cover',
  enlarge: 2,
  outputSize: 0.7,
  outputType: 'webp',
  canScale: true
}
```

--------------------------------

### @real-time

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/api-reference-vue-cropper-component.md

Emitted continuously as the crop box or image changes, providing preview data.

```APIDOC
## @real-time (or @realTime)

### Description
Emitted continuously as the crop box or image changes. Provides preview data.

### Payload
- **w** (Number) - Crop box width
- **h** (Number) - Crop box height
- **url** (String) - Processed image URL
- **div** (Object) - Crop box dimensions for preview
- **img** (Object) - Image transformation styles
- **html** (String) - Preview HTML string
```

--------------------------------

### Basic Template Usage

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/api-reference-vue-cropper-component.md

Standard implementation of the VueCropper component within a template, including a ref for programmatic access.

```html
<VueCropper
  ref="cropper"
  :img="imageUrl"
  :outputSize="1"
  :outputType="'jpeg'"
></VueCropper>
```

--------------------------------

### Implement Real-Time Preview with VueCropper

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/usage-patterns.md

Uses the real-time event to update a preview container dynamically as the user interacts with the cropper.

```vue
<template>
  <div class="container">
    <div class="cropper" style="width: 500px; height: 400px;">
      <VueCropper
        :img="imageUrl"
        @real-time="onRealTime"
      />
    </div>
    
    <div class="preview" :style="previewContainer">
      <div :style="previewData.div">
        <img :src="previewData.url" :style="previewData.img" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '',
      previewData: {},
      previewContainer: {
        width: '200px',
        height: '200px',
        overflow: 'hidden',
        border: '1px solid #ccc'
      }
    }
  },
  methods: {
    onRealTime(data) {
      this.previewData = data
    }
  }
}
</script>
```

--------------------------------

### Project File Structure

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/README.md

Overview of the directory layout for the vue-cropper project, separating Vue 2 and Vue 3 implementations.

```text
vue-cropper/
├── package.json              # Vue 2 package configuration
├── src/
│   ├── index.js             # Vue 2 entry point
│   ├── vue-cropper.vue      # Vue 2 component
│   └── exif-js-min.js       # EXIF library
├── next/
│   ├── package.json         # Vue 3 package configuration
│   ├── lib/
│   │   ├── index.ts         # Vue 3 entry point
│   │   ├── vue-cropper.vue  # Vue 3 component
│   │   ├── typings/
│   │   │   └── index.d.ts   # TypeScript definitions
│   │   └── exif-js-min.js   # EXIF library
│   └── src/
│       ├── App.vue          # Demo application
│       └── main.ts          # Demo entry
└── dist/                    # Built distribution files
```

--------------------------------

### Access Properties and Methods

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/api-quick-reference.md

Shows how to access the cropper instance via refs, read state, and invoke methods.

```javascript
// Via template ref
const cropper = this.$refs.cropper  // Vue 2
const cropper = ref.value           // Vue 3

// Read current state
console.log(cropper.cropW, cropper.cropH)
console.log(cropper.scale, cropper.rotate)

// Call methods
cropper.startCrop()
cropper.rotateRight()
cropper.getCropData(cb)

// Change props
this.imageUrl = newUrl
```

--------------------------------

### Create Multiple Size Previews

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/usage-patterns.md

Displays multiple preview instances with different zoom levels by applying CSS scaling to the preview data.

```vue
<template>
  <div>
    <VueCropper
      :img="imageUrl"
      @real-time="onRealTime"
    />
    
    <div class="previews">
      <div class="preview-50">
        <div :style="previewData.div">
          <img :src="previewData.url" :style="previewData.img" />
        </div>
      </div>
      
      <div class="preview-25">
        <div :style="previewData.div">
          <img :src="previewData.url" :style="previewData.img" />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.preview-50 {
  width: 200px;
  height: 200px;
  overflow: hidden;
  zoom: 0.5;
}

.preview-25 {
  width: 200px;
  height: 200px;
  overflow: hidden;
  zoom: 0.25;
}
</style>

<script>
export default {
  data() {
    return { previewData: {} }
  },
  methods: {
    onRealTime(data) {
      this.previewData = data
    }
  }
}
</script>
```

--------------------------------

### Handle real-time crop box sizing with @crop-sizing

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/events-api.md

Use this event to provide immediate UI feedback while the user is actively resizing the crop box.

```javascript
{
  cropW: number,             // current crop box width in pixels
  cropH: number              // current crop box height in pixels
}
```

```vue
<template>
  <div class="container">
    <VueCropper
      :img="imageUrl"
      @crop-sizing="onCropSizing"
    />
    
    <div class="size-display">
      Sizing: {{ currentSize.cropW }} × {{ currentSize.cropH }} px
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentSize: {
        cropW: 0,
        cropH: 0
      }
    }
  },
  methods: {
    onCropSizing(data) {
      this.currentSize = data
      // Update UI in real-time while resizing
    }
  }
}
</script>
```

--------------------------------

### Implement Full VueCropper Component

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/api-reference-vue-cropper-component.md

A complete implementation showing the VueCropper component with preview functionality and control buttons for rotation, zooming, and cropping.

```vue
<template>
  <div class="cropper-container">
    <div class="cropper-wrapper" style="width: 500px; height: 400px;">
      <VueCropper
        ref="cropper"
        :img="imageUrl"
        :outputSize="0.8"
        :outputType="'jpeg'"
        :autoCrop="true"
        :autoCropWidth="400"
        :autoCropHeight="300"
        :fixed="true"
        :fixedNumber="[16, 9]"
        :canMove="true"
        :canMoveBox="true"
        :centerBox="false"
        :high="true"
        :info="true"
        :enlarge="1"
        @real-time="handleRealTime"
        @img-load="handleImgLoad"
      />
    </div>

    <div class="preview-wrapper">
      <div :style="previewStyle">
        <div :style="previewData.div">
          <img :src="previewData.url" :style="previewData.img" />
        </div>
      </div>
    </div>

    <div class="controls">
      <button @click="handleRotateLeft">Rotate Left</button>
      <button @click="handleRotateRight">Rotate Right</button>
      <button @click="handleZoomIn">Zoom In</button>
      <button @click="handleZoomOut">Zoom Out</button>
      <button @click="handleCrop">Get Cropped Image</button>
    </div>
  </div>
</template>

<script>
import { VueCropper } from 'vue-cropper'

export default {
  components: { VueCropper },
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg',
      previewData: {},
      previewStyle: {
        width: '200px',
        height: '150px',
        overflow: 'hidden'
      }
    }
  },
  methods: {
    handleRealTime(data) {
      this.previewData = data
    },
    handleImgLoad(status) {
      console.log('Image load status:', status)
    },
    handleRotateLeft() {
      this.$refs.cropper.rotateLeft()
    },
    handleRotateRight() {
      this.$refs.cropper.rotateRight()
    },
    handleZoomIn() {
      this.$refs.cropper.changeScale(1)
    },
    handleZoomOut() {
      this.$refs.cropper.changeScale(-1)
    },
    handleCrop() {
      this.$refs.cropper.getCropData(data => {
        console.log(data)
        // Use or upload the cropped image
      })
    }
  }
}
</script>

<style scoped>
.cropper-container {
  display: flex;
  gap: 20px;
}

.cropper-wrapper {
  border: 1px solid #ccc;
}

.controls {
  display: flex;
  gap: 10px;
  flex-direction: column;
}

button {
  padding: 8px 16px;
  cursor: pointer;
}
</style>
```

--------------------------------

### Importing Component Styles

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/module-exports.md

Include the required CSS file for the component to render correctly.

```javascript
// Import styles
import 'vue-cropper/dist/index.css'
// or
import 'vue-cropper@next/dist/index.css'
```

--------------------------------

### Component Auto-Registration

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/module-exports.md

Logic for automatic global registration when the library is loaded in a browser environment.

```javascript
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}
```

--------------------------------

### Mobile-Friendly Configuration

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/configuration.md

Optimizes for mobile devices by enabling pinch zoom and setting a lower output quality for smaller file sizes.

```vue
<VueCropper
  :img="imageUrl"
  :autoCrop="true"
  :autoCropWidth="300"
  :autoCropHeight="300"
  :fixed="true"
  :fixedNumber="[3, 4]"
  :canScale="true"
  :outputType="'jpeg'"
  :outputSize="0.7"
  :limitMinSize="50"
/>
```

--------------------------------

### Configure Vue 3 Tree-Shaking

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/module-exports.md

Choose between global plugin registration or component-only imports to minimize bundle size.

```typescript
import { globalCropper } from 'vue-cropper'
app.use(globalCropper)
// Includes only necessary code
```

```typescript
import { VueCropper } from 'vue-cropper'
// Plugin wrapper not included in bundle
```

--------------------------------

### Component Methods

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/README.md

Methods available on the component instance for controlling cropping, transformations, and data retrieval.

```APIDOC
## Methods

### Crop Control
- **startCrop()** - Enable crop mode
- **stopCrop()** - Disable crop mode
- **clearCrop()** - Clear crop box
- **goAutoCrop(w, h)** - Auto-generate crop box

### Transform
- **changeScale(num)** - Zoom in/out
- **rotateRight()** - Rotate 90° CW
- **rotateLeft()** - Rotate 90° CCW
- **rotateClear()** - Reset rotation

### Export
- **getCropData(cb)** - Get base64 data URL
- **getCropBlob(cb)** - Get Blob object
- **refresh()** - Reset component
```

--------------------------------

### Configure Video Thumbnail

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/README.md

Sets a 16:9 aspect ratio with cover mode and enlargement factor for video thumbnails.

```javascript
:fixed="true"
:fixedNumber="[16, 9]"
:mode="'cover'"
:enlarge="1.5"
```

--------------------------------

### Manual Crop Box Creation

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/usage-patterns.md

Enables manual drawing of the crop box by disabling auto-crop and triggering the startCrop method via a component reference.

```vue
<template>
  <div>
    <VueCropper
      ref="cropper"
      :img="imageUrl"
      :autoCrop="false"
    />
    <button @click="startCropping">Start Crop</button>
  </div>
</template>

<script>
export default {
  methods: {
    startCropping() {
      this.$refs.cropper.startCrop()
      // Now user can draw crop box by clicking and dragging
    }
  }
}
</script>
```

--------------------------------

### Handle real-time preview events

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/api-reference-vue-cropper-component.md

Use the real-time event to update preview elements as the crop box or image is manipulated.

```javascript
@real-time="handleRealTime"
```

```javascript
{
  w: 300,           // crop box width
  h: 300,           // crop box height
  url: "data:...",  // processed image URL
  div: {            // crop box dimensions for preview
    width: "300px",
    height: "300px"
  },
  img: {            // image transformation styles
    width: "800px",
    height: "600px",
    transform: "scale(1) translate3d(...) rotateZ(0deg)"
  },
  html: "<div>...</div>"  // preview HTML string
}
```

```javascript
handleRealTime(data) {
  // Preview at 50% zoom
  this.previewStyle = {
    width: data.w + 'px',
    height: data.h + 'px',
    overflow: 'hidden',
    zoom: 0.5
  }
}
```

--------------------------------

### Toggle Crop Mode

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/usage-patterns.md

Demonstrates how to programmatically switch between active and inactive cropping states using component methods.

```vue
<template>
  <div>
    <VueCropper
      ref="cropper"
      :img="imageUrl"
    />
    <button @click="toggleCrop">
      {{ isCropping ? 'Stop Crop' : 'Start Crop' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return { isCropping: false }
  },
  methods: {
    toggleCrop() {
      if (this.isCropping) {
        this.$refs.cropper.stopCrop()
      } else {
        this.$refs.cropper.startCrop()
      }
      this.isCropping = !this.isCropping
    }
  }
}
</script>
```

--------------------------------

### Handle crop box resizing events

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/api-reference-vue-cropper-component.md

Monitor real-time dimensions during crop box resizing.

```javascript
@crop-sizing="handleCropSizing"
```

```javascript
{
  cropW: 300,    // current crop box width
  cropH: 300     // current crop box height
}
```

--------------------------------

### Documentation Directory Structure

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/INDEX.md

Visual representation of the project's documentation file organization.

```text
README.md                                    [Overview]
├── api-reference-vue-cropper-component.md  [Component API]
├── api-quick-reference.md                  [Cheat Sheet]
├── configuration.md                        [Setup & Config]
├── events-api.md                           [Event System]
├── module-exports.md                       [Module Structure]
├── types.md                                [Type Definitions]
└── usage-patterns.md                       [Code Examples]
```

--------------------------------

### Direct Component Usage Pattern

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/module-exports.md

Accessing the component constructor directly from the default export.

```javascript
import VueCropper from 'vue-cropper'

export default {
  components: {
    VueCropper: VueCropper.VueCropper
  }
}
```

--------------------------------

### Access Version Information

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/module-exports.md

Retrieve the library version programmatically for Vue 2 and Vue 3 environments.

```javascript
import VueCropper from 'vue-cropper'
console.log(VueCropper.version)  // '0.6.5'
```

```typescript
import { globalCropper } from 'vue-cropper'
console.log(globalCropper.version)  // '1.1.4'
```

--------------------------------

### Component Methods

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/api-quick-reference.md

Methods available on the cropper instance accessed via template refs.

```APIDOC
## Component Methods

### startCrop()
Initializes the cropping process.

### rotateRight()
Rotates the image to the right.

### getCropData(cb)
Retrieves the current crop data via a callback function.
```

--------------------------------

### Server-Optimized Export

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/configuration.md

Configures output for modern web formats like WebP with specific background and quality settings.

```vue
<VueCropper
  :img="sourceImage"
  :outputType="'webp'"
  :outputSize="0.6"
  :enlarge="2"
  :high="true"
  :full="false"
  :fillColor="'#ffffff'"
/>
```

--------------------------------

### Crop Box Methods

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/api-quick-reference.md

Methods for managing and querying the crop box.

```APIDOC
## ref.goAutoCrop([w], [h])
### Description
Auto-generates a crop box with optional width and height.

## ref.getCropAxis()
### Description
Returns the crop box coordinates as {x1, x2, y1, y2}.
```

--------------------------------

### Named Import Pattern

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/module-exports.md

Using named imports for tree-shaking and local component registration.

```javascript
import { VueCropper } from 'vue-cropper'

export default {
  components: { VueCropper }
}
```

--------------------------------

### Component Props

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/README.md

Configuration properties for image handling, crop box behavior, interaction settings, and output formatting.

```APIDOC
## Props

### Image Configuration
- **img** (String/Blob/File) - Image source
- **outputSize** (Number) - Compression quality (0.1-1)
- **outputType** (String) - Export format (jpeg, png, webp)
- **maxImgSize** (Number) - Max pixel dimension

### Crop Box
- **autoCrop** (Boolean) - Auto-create crop box
- **autoCropWidth** (Number) - Initial width
- **autoCropHeight** (Number) - Initial height
- **fixed** (Boolean) - Lock aspect ratio
- **fixedNumber** (Array) - Aspect ratio [w, h]
- **fixedBox** (Boolean) - Disable resize
- **centerBox** (Boolean) - Confine to image

### Interaction
- **canMove** (Boolean) - Drag image
- **canMoveBox** (Boolean) - Drag crop box
- **canScale** (Boolean) - Scroll zoom
- **info** (Boolean) - Show dimensions
```

--------------------------------

### Free Aspect Ratio Configuration

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/usage-patterns.md

Allows users to define custom crop dimensions by disabling the fixed aspect ratio constraint.

```vue
<VueCropper
  :img="imageUrl"
  :fixed="false"
  :autoCrop="true"
/>
```

--------------------------------

### @crop-sizing

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/api-reference-vue-cropper-component.md

Emitted when the crop box is being resized.

```APIDOC
## @crop-sizing (or @cropSizing)

### Description
Emitted when the crop box is being resized.

### Payload
- **cropW** (Number) - Current crop box width
- **cropH** (Number) - Current crop box height
```

--------------------------------

### Defining Named Exports

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/module-exports.md

Shows the export configuration for the main entry point.

```typescript
export const globalCropper: vueCropperGlobal
export { VueCropper }
export default globalCropper
```

--------------------------------

### Import VueCropper Component

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/api-reference-vue-cropper-component.md

Import the component based on the Vue version being used.

```javascript
import { VueCropper } from 'vue-cropper'
```

```javascript
import { VueCropper } from 'vue-cropper@next'
```

--------------------------------

### Configure User Avatar Upload

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/README.md

Sets a square aspect ratio with auto-crop enabled for avatar uploads.

```javascript
:fixed="true"
:fixedNumber="[1, 1]"
:autoCrop="true"
:autoCropWidth="200"
:autoCropHeight="200"
```

--------------------------------

### Complete Vue-Cropper Event Integration

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/events-api.md

A full component implementation demonstrating event handling for image loading, movement, and resizing, alongside methods to export cropped data.

```vue
<template>
  <div class="cropper-app">
    <div class="cropper-section">
      <VueCropper
        ref="cropper"
        :img="imageUrl"
        :autoCrop="true"
        :canMove="true"
        :canMoveBox="true"
        @real-time="handleRealTime"
        @img-moving="handleImgMoving"
        @crop-moving="handleCropMoving"
        @crop-sizing="handleCropSizing"
        @change-crop-size="handleCropSizeChanged"
        @img-load="handleImageLoad"
      />
    </div>

    <div class="preview-section">
      <h3>Preview</h3>
      <div class="preview" :style="previewContainerStyle">
        <div :style="previewData.div">
          <img :src="previewData.url" :style="previewData.img" />
        </div>
      </div>
    </div>

    <div class="info-panel">
      <div class="info-item">
        <strong>Image Status:</strong> {{ imageStatus }}
      </div>
      <div class="info-item">
        <strong>Image Moving:</strong> {{ isImageMoving ? 'Yes' : 'No' }}
      </div>
      <div class="info-item">
        <strong>Crop Box Moving:</strong> {{ isCropMoving ? 'Yes' : 'No' }}
      </div>
      <div class="info-item">
        <strong>Current Size:</strong> {{ currentSize.cropW }} × {{ currentSize.cropH }} px
      </div>
      <div class="info-item">
        <strong>Final Size:</strong> {{ finalSize.width }} × {{ finalSize.height }} px
      </div>
    </div>

    <div class="controls">
      <button @click="getCropData">Export as Base64</button>
      <button @click="getCropBlob">Export as Blob</button>
    </div>
  </div>
</template>

<script>
import { VueCropper } from 'vue-cropper'

export default {
  components: { VueCropper },
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg',
      imageStatus: 'Loading...',
      isImageMoving: false,
      isCropMoving: false,
      previewData: {
        w: 0,
        h: 0,
        url: '',
        div: {},
        img: {},
        html: ''
      },
      previewContainerStyle: {
        width: '200px',
        height: '200px',
        overflow: 'hidden',
        border: '1px solid #ccc'
      },
      currentSize: {
        cropW: 0,
        cropH: 0
      },
      finalSize: {
        width: 0,
        height: 0
      }
    }
  },
  methods: {
    handleRealTime(data) {
      this.previewData = data
    },
    handleImgMoving(data) {
      this.isImageMoving = data.moving
    },
    handleCropMoving(data) {
      this.isCropMoving = data.moving
    },
    handleCropSizing(data) {
      this.currentSize = data
    },
    handleCropSizeChanged(data) {
      this.finalSize = data
    },
    handleImageLoad(status) {
      this.imageStatus = status === 'success' ? 'Loaded' : 'Error'
    },
    getCropData() {
      this.$refs.cropper.getCropData(data => {
        console.log('Base64 data:', data)
        // Use the data URL
      })
    },
    getCropBlob() {
      this.$refs.cropper.getCropBlob(blob => {
        console.log('Blob data:', blob)
        // Upload or use blob
      })
    }
  }
}
</script>

<style scoped>
.cropper-app {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 20px;
}

.cropper-section {
  grid-column: 1;
  height: 500px;
  border: 1px solid #ddd;
}

.preview-section {
  grid-column: 2;
}

.preview {
  display: inline-block;
  margin-bottom: 20px;
}

.info-panel {
  grid-column: 1 / -1;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 4px;
}

.info-item {
  margin: 10px 0;
  font-size: 14px;
}

.controls {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
}

button {
  padding: 10px 20px;
  cursor: pointer;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
}

button:hover {
  background: #0056b3;
}
</style>
```

--------------------------------

### Configure mobile avatar selection

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/configuration.md

Sets a square 1:1 aspect ratio with specific dimensions and PNG output for mobile avatars.

```javascript
{
  fixed: true,
  fixedNumber: [1, 1],
  autoCrop: true,
  autoCropWidth: 200,
  autoCropHeight: 200,
  outputSize: 0.8,
  outputType: 'png',
  canScale: true,
  limitMinSize: 100
}
```

--------------------------------

### Enable Crop Mode

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/api-reference-vue-cropper-component.md

Activates the cropping tool, allowing users to draw a crop box on the image.

```javascript
this.$refs.cropper.startCrop()
```

```javascript
// Enable cropping
this.$refs.cropper.startCrop()
```

--------------------------------

### goAutoCrop([width], [height])

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/api-reference-vue-cropper-component.md

Automatically generates and positions the crop box.

```APIDOC
## goAutoCrop([width], [height])

### Description
Automatically generate and position the crop box. Called internally when autoCrop prop is enabled.

### Parameters
- **width** (Number) - Optional - Manual crop box width.
- **height** (Number) - Optional - Manual crop box height.

### Returns
- `undefined`
```

--------------------------------

### Access cropper methods

Source: https://github.com/xyxiao001/vue-cropper/blob/main/english.md

Methods for retrieving image/crop box coordinates and controlling auto-crop behavior.

```javascript
this.$refs.cropper.getImgAxis()
this.$refs.cropper.getCropAxis()
this.$refs.cropper.goAutoCrop
```

--------------------------------

### Configure limitMinSize attribute

Source: https://github.com/xyxiao001/vue-cropper/blob/main/english.md

Defines the minimum area for the crop box using numbers, strings, or arrays.

```text
limitMinSize: [Number, Array, String]
```

--------------------------------

### Blob or File Object Loading

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/usage-patterns.md

Pass a File or Blob object directly to the component, which handles the internal conversion.

```javascript
methods: {
  onImageSelected(event) {
    const file = event.target.files[0]
    if (file) {
      // Pass Blob/File directly - component handles conversion
      this.imageUrl = file
    }
  }
}
```

--------------------------------

### Configure professional photo cropping

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/configuration.md

Uses a fixed 4:3 aspect ratio with high-quality output settings.

```javascript
{
  fixed: true,
  fixedNumber: [4, 3],
  centerBox: true,
  high: true,
  outputSize: 1,
  autoCrop: true,
  canMove: true,
  canMoveBox: true
}
```

--------------------------------

### Configure vue-cropper in Nuxt.js

Source: https://github.com/xyxiao001/vue-cropper/blob/main/english.md

Add vue-cropper to the vendor build list and register it as a client-side plugin to avoid SSR issues.

```javascript
module.exports = {
  ...
  build: {
    vendor: [
      'vue-cropper
    ...
    plugins: [
      { src: '~/plugins/vue-cropper', ssr: false }
    ]
  }
}
```

--------------------------------

### Configure Scaling

Source: https://github.com/xyxiao001/vue-cropper/blob/main/english.md

Enable or disable scaling functionality using the canScale property.

```text
canScale: true
```

--------------------------------

### Manage Crop Box

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/api-quick-reference.md

Methods to generate the crop box and retrieve its current positioning.

```javascript
ref.goAutoCrop([w], [h])     // Auto-generate crop box
ref.getCropAxis()            // Get crop box coordinates → {x1, x2, y1, y2}
```

--------------------------------

### @img-load

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/api-reference-vue-cropper-component.md

Emitted when image finishes loading.

```APIDOC
## @img-load (or @imgLoad)

### Description
Emitted when image finishes loading.

### Payload
- **status** (String) - "success" or "error"
```

--------------------------------

### Configure infoTrue attribute

Source: https://github.com/xyxiao001/vue-cropper/blob/main/english.md

Toggles between displaying true output image dimensions or crop box dimensions.

```text
infoTrue true to show the true output image width and height false show the width of the screenshot box
```

--------------------------------

### Handle Crop Box Resize Events

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/api-quick-reference.md

Tracks sizing status and final dimensions during and after crop box resizing.

```javascript
@crop-sizing="(data) => {
  status = `${data.cropW} × ${data.cropH}`
}"

@change-crop-size="(data) => {
  final = `${data.width} × ${data.height}`
}"
```

--------------------------------

### Reset Methods

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/api-quick-reference.md

Methods to reset the component state.

```APIDOC
## ref.refresh()
Performs a full reset of the component.

## ref.clearCrop()
Clears the current crop box selection.
```

--------------------------------

### Handle image load events

Source: https://github.com/xyxiao001/vue-cropper/blob/main/_autodocs/api-reference-vue-cropper-component.md

Check the status of the image loading process.

```javascript
@img-load="handleImgLoad"
```

```javascript
handleImgLoad(status) {
  if (status === 'success') {
    console.log('Image loaded successfully')
  } else {
    console.log('Image failed to load')
  }
}
```
Tokens:
Raw