# 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)