mg-vue-cropper

Installation

$ npm i --save mg-vue-cropper

Useage

// 1.Global Registration (in main.js)
import MgCropper from 'mg-vue-cropper'
Vue.use(MgCropper)

OR

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

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用于上传和显示)。参数说明，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