# mg-vue-cropper

> A mg vue-cropper Component.

Latest version **3.0.7** (published 2025-06-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install mg-vue-cropper
pnpm add mg-vue-cropper
yarn add mg-vue-cropper
bun add mg-vue-cropper
```

## Health

**Score 25/100 (F)** — status: maintenance-mode.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.7 |
| Published | 2025-06-10 |
| First published | 2020-10-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 69.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | wangyuanlin |
| Maintainers | wangyuanlin001 |
| Keywords | mg, vue, vue3, cropper, components, vue-cropper, vue-component, vue-cropper-component |

## Links

- npm: https://www.npmjs.com/package/mg-vue-cropper
- npm.io page: https://npm.io/package/mg-vue-cropper

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^3.5.13

## Recent versions

- 3.0.7 (latest) — 2025-06-10
- 3.0.6 — 2025-06-05
- 3.0.5 — 2025-06-05
- 3.0.4 — 2025-06-05
- 3.0.3 — 2025-06-05
- 3.0.2 — 2025-06-04
- 3.0.1 — 2025-06-03
- 3.0.0 — 2025-06-03
- 2.0.0 — 2021-02-23
- 2.0.0-beta.2 — 2020-12-17
- 2.0.0-beta.1 — 2020-12-09
- 1.0.1 — 2020-11-10
- 1.0.0 — 2020-10-29
- 0.9.1 — 2020-10-20
- 0.9.0 — 2020-10-17
- … 8 more at https://npm.io/package/mg-vue-cropper/versions

## README

# mg-vue-cropper


## Installation
```
$ npm i --save mg-vue-cropper
```

## Useage
```
// 1.Global Registration (in main.js)
import MgCropper from 'mg-vue-cropper'
import 'mg-vue-cropper/lib/index.css'

const app = createApp(App)
MgCropper.install(app)

OR

// 2.Local Registration (in xxx.vue)
import { cropper } from 'mg-vue-cropper'
import 'mg-vue-cropper/lib/index.css'

components: {
    mgCropper: cropper
}

<!-- Cut Mode -->
<mg-cropper
    ref="mgCropper"
    :width="770"
    :height="300"
    color-primary="#6676FF"
    color-bg="rgba(0, 0, 0, 0.8)"
    :original-url="originalUrl"
    :equi-ratio="false"
    :min-cut-width="16"
    :min-cut-height="16"
    :init-cut-width="16"
    :init-cut-height="16"
    :init-cut-left="0"
    :init-cut-top="0"
    :rotate-visible="true"
    :preview-visible="true"
    preview-height="42%"
    @img-onload="imgOnloadHandle"
    @img-onerror="imgOnerrorHandle" />

<!-- Chartlet Mode -->
<mg-cropper
    ref="mgCropper"
    :width="770"
    :height="300"
    color-primary="#6676FF"
    color-bg="rgba(0, 0, 0, 0.8)"
    :original-url="originalUrl"
    :rotate-visible="true"
    :chartlet-on="true"
    :chartlet-list="chartletList"
    :current-chartlet="currentChartlet"
    :chartlet-init-left="10"
    :chartlet-init-top="10"
    @img-onload="imgOnloadHandle"
    @img-onerror="imgOnerrorHandle">
    <!-- Diy Component or DOM -->
    <chartlet-list
        :chartlet-list="chartletList"
        :current-chartlet="currentChartlet"
        @chose-chartlet="choseChartletHandle" />
</mg-cropper>
```

### Attributes

| 参数 | 说明 | 类型 | 是否必传 | 默认值 |
| ---- | -----| --- | ------- | ------ |
| width | mg-cropper容器宽 | Number | 否 | 770 |
| height | mg-cropper容器高 | Number | 否 | 300 |
| color-primary | 主题色 | String | 否 | #6676FF |
| color-bg | 画布背景色 | String | 否 | rgba(0, 0, 0, 0.8) |
| original-url | 需要裁剪的图片原始URL | String | 是 | — |
| equi-ratio | 是否开启等比缩放，默认关闭 | Boolean | 否 | false |
| min-cut-width | 裁剪框的最小宽(相对于原图) | Number | 否 | 16 |
| min-cut-height | 裁剪框的最小高(相对于原图) | Number | 否 | 16 |
| init-cut-width | 裁剪框的初始宽(相对于原图) | Number | 否 | 16 |
| init-cut-height | 裁剪框的初始高(相对于原图) | Number | 否 | 16 |
| init-cut-left | 裁剪框的初始位置left(相对于原图) | Number | 否 | 0 |
| init-cut-top | 裁剪框的初始位置top(相对于原图) | Number | 否 | 0 |
| rotate-visible | 是否显示旋转按钮(默认隐藏) | Boolean | 否 | false |
| preview-visible | 是否显示预览框(默认隐藏) | Boolean | 否 | false |
| preview-height | 预览框的高度 | String/Number | 否 | 42% |
| chartlet-on | 是否开启贴图功能(默认不开启)，贴图功能与裁剪功能互斥 | Boolean | 否 | false |
| chartlet-list | 贴图列表 [{ name: '贴图名(请确保有值且唯一)', url: '贴图地址' }] | Array | 否 | [] |
| current-chartlet | 选中的贴图对象 { name: '贴图名(请确保有值且唯一)', url: '贴图地址' } | Object | 否 | { name: '', url: '' } |
| chartlet-init-left | 贴图的初始位置left(相对于原图) | Number | 否 | 10 |
| chartlet-init-top | 贴图的初始位置top(相对于原图) | Number | 否 | 10 |

### Methods

| 方法名 | 说明 | 参数 | 返回值 |
| -------| --- | -----| ------ |
| saveImg | 保存裁剪图片(会生成blob和blobUrl用于上传和显示)。<br />参数说明，cutPos : 裁剪区域四个角坐标; cutSize: 裁剪区域尺寸; naturalSize: 原始图片大小; hasChartlet: 是否添加了贴图 | — | Promise { blob, blobUrl, cutPos, cutSize, naturalSize, hasChartlet } |
| downloadImg | 下载裁剪图片 | fileName： 下载文件名(不传默认使用时间戳) | — |
| setCutBoxSize | 手动设置裁剪框的尺寸(相对于原图) | width(不小于16px), height(不小于16px) | — |
| setCutBoxPos | 手动设置裁剪框的位置(相对于原图) | left, top | — |
| setChartletPos | 手动设置贴图的位置(相对于原图) | left, top | — |

### Slot
| name | 说明 |
|------|--------|
| — | default插槽，裁剪框右侧区的内容 |

### Events

| 事件名      | 说明         | 回调参数 |
| ----------- | ------------ | -------- |
| img-onload  | 图片加载完成 | event |
| img-onerror | 图片加载失败 | event |
| img-onabort | 图像加载被中断 | event |

### Npm
[mg-vue-cropper](https://www.npmjs.com/package/mg-vue-cropper)

---
_Source: https://npm.io/package/mg-vue-cropper · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._