Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/banlangenn/vue-crop
[举个例子]https://codesandbox.io/s/910ro8ym9r [演示链接（戳我直达）]http://www.wwwwxy.top/html/blg/
https://github.com/banlangenn/vue-crop
crop crop-image vue vue-component
Last synced: about 1 month ago
JSON representation
[举个例子]https://codesandbox.io/s/910ro8ym9r [演示链接（戳我直达）]http://www.wwwwxy.top/html/blg/
- Host: GitHub
- URL: https://github.com/banlangenn/vue-crop
- Owner: Banlangenn
- Created: 2019-02-21T09:39:49.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T16:54:13.000Z (about 2 years ago)
- Last Synced: 2025-01-15T08:29:22.645Z (about 1 month ago)
- Topics: crop, crop-image, vue, vue-component
- Language: Vue
- Homepage:
- Size: 7.56 MB
- Stars: 38
- Watchers: 2
- Forks: 8
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## vue-cropblg
vue 图片裁剪插件
## [演示链接（戳我直达）](http://www.wwwwxy.top/html/blg/)
## Installation
```bash
$ npm install vue-cropblg
$ yarn add vue-cropblg
```
## Usage
```js
...
组件内引入
import { crop } from "vue-cropblg";
...
components: {
crop
},
全局引入
import crop from "vue-cropblg";
Vue.use(crop)
```
## API
### Attributes
| 参数 | 说明 | 类型 | 可选值 |默认值 |
|--------|:-------:|------:|------:|------:|
| v-model | 组件 | Object|-- | --|
|shape | 截图形状 | String |rect/arc/imgage | rect|
| position | 水印位置大小角度[x,y,size,angle] | Array|--| ['90%', '90%',1,0]|
| textWatermark | 文字水印] | String|--| --|
| imageWatermark | 图片水印 | File / String|--| --|
| defaultImgUrl | 默认图片 | File / String|--|--|
| angle | 按钮旋转角度 | Number|--| 0|
| color | 水印.编辑框.控制按钮颜色 | String|16进制颜色| 反差最大颜色|
| rotation | 图片在canvas旋转角度，能动态改变，rotateBtn为false有效 | Number | -- | --|
| penBtn | 是否渲染画笔按钮 | Boolean | true / false | true|
| revokeBtn | 是否渲染撤销按钮 | Boolean | true / false | true|
| rotateBtn | 是否渲染旋转按钮 | Boolean | true / false | true|
***补充说明***
>画布中的图片是支持 单指拖动的，双指缩放的 （画笔激活状态下手势会被禁掉）
### Methods
| 方法名 | 说明 | 参数 |
|--------|:-------:|------:|
|changeImage | 改变处理图片,如果没有传imgAddress,会打开本地 | Function(imgAddress: String)|
| getImage | 获取处理后图片,返回Promise,可以选择返回 base64和bolb,quality为文件压缩比(大小) | Function(type:Base64 / Bolb, mimeType:image/jpeg / image/png, quality:Number)|
| imgLoaded | 图片canvas加载完成，对调用此函数（用来加loading） | --|
***changeImage，getImage 是组件内置的：通过ref或v-model 调用***
>changeImage() 直接调用，默认会打开本地文件选择 ,changeImage('url') 传入图片 网络url 会编辑该链接图片
getImage() 2.直接调用:默认参数：getImage('Base64','image/png', 2) ,
type 可选值： Base64和 Bolb, mimeType 可选值：'image/jpeg' 和 'image/png', quality: 默认最佳
### Slot
| name | 说明 |
|--------|:-------:|
| placeholder | 没有图片时占位图 |
| defaultImgUrl | 默认处理图片 |