Continuing the discussion from :
============================分割线=:joy:=============================
vue-cropblg
介绍一个图片裁剪插件：
Installation
$ npm install vue-cropblg$ yarn add vue-cropblg复制代码
Usage
... 组件内引入import { crop } from "vue-cropblg"; ...components: { crop}, 全局引入import crop from "vue-cropblg";Vue.use(crop)复制代码
API
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| v-model | 组件 | Object | -- | -- |
| shape | 截图形状 | String | rect/arc | rect |
| position | 水印位置大小角度[x,y,size,angle] | Array | -- | ['90%', '90%',1,0] |
| textWatermark | 文字水印] | String | -- | -- |
| imageWatermark | 图片水印 | File / String | -- | -- |
| defaultImgUrl | 默认图片 | File / String | -- | -- |
| angle | 控制按钮旋转角度 | Number | -- | 反差最大颜色 |
| color | 水印.编辑框.控制按钮颜色 | String | 16进制颜色 | 反差最大颜色 |
Methods
| 方法名 | 说明 | 参数 |
| changeImage | 改变处理图片,如果没有传imgAddress,会打开本地 | Function(imgAddress: String) |
| getImage | 获取处理后图片,返回Promise,可以选择返回 base64和bolb,quality为文件压缩比(大小) | Function(type:Base64 / Bolb, mimeType:image/jpeg / image/png, quality:Number) |
Slot
| name | 说明 |
| placeholder | 没有图片时占位图 |
| defaultImgUrl | 默认处理图片 |
图片在这!：