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