Vue Pic Clip Save
一个简单的移动端裁剪图片上传插件
Project README
vue-pic-clip
一个简单的移动端裁剪图片上传插件
### 安装 Install
npm install vue-pic-clip -D
// 组件内使用
import { VueClip } from 'vue-pic-clip'
components: {
VueClip,
},
// main.js里面使用
import VueClip from 'vue-pic-clip'
Vue.use(VueClip)
<vue-clip
:img=""
:autoClip="option.autoClip"
:outputSize="option.outputSize"
@finish="finish"
>上传头像</vue-clip>
配置参数
| 名称 | 功能 | 默认值 | 可选值 |
|---|---|---|---|
| img | 默认图片地址 | 空 | url地址 |
| accept | 上传图片类型 | 'image/png, image/jpeg, image/jpg, image/gif' | jpeg |
| autoClip | 是否生成截图框 | false | ture |
| autoClipWidth | 截图框的宽度 | 容器宽度80% | 0~容器宽度 |
| autoClipHeight | 截图框的高度 | 与宽度相等 | 0~容器宽度 |
| canMove | 图片能否拖动 | true | true |
| canMoveBox | 截图框能否拖动 | ture | ture |
| dataUrlType | 输出图片数据类型 | blob | base64 |
| fixed | 截图框是否开启固定宽高比 | false | true |
| fixedNumber | 截图框宽高比 | [1,1] | [宽度，高度] |
| fixedBox | 固定截图框大小 | false | true |
| isOriginalImg | 是否上传原图 | false | true |
| maxWidth | 生成图片的最大宽度 | 600 | 0~max(启用裁剪或上传原图时最大宽度无效) |
| maxHeight | 生成图片的最大高度 | 600 | 0~max(同上) |
| outputSize | 输出图片压缩比 | 1 | 0.1-1 |
| outputType | 生成图片的格式 | jpeg | jpeg |
| theme | 样式风格 | rect | rect |
| finish | 完成操作事件 | 回调函数 |
主要研究vue-cropper的源码开发学习。一直使用这个插件做项目，最近比较闲，就撸了一个更简单的适合我自己用的插件。没有大量真机测试过，有什么问题，欢迎大家提Issues给我。
写个插件玩玩，给个star，多多支持，谢谢
Thanks to
Open Source Agenda is not affiliated with "Vue Pic Clip" Project. README Source: Tianyazz/vue-pic-clip
Stars
30
Open Issues
2
Last Commit
5 years ago
Repository
Tags
Open Source Agenda Badge
