ImageCropper
一个用于vue的图片裁剪工具
https://gitee.com/jiangliyue/vue_picture_clipping_component.git
HellowWorld 是使用示例； ImageCropper是组件代码，放进项目即可使用
组件源码来源于花裤衩大神的后台模板集成方案，我只是对常用功能做了说明和简单优化
https://juejin.im/post/59097cd7a22b9d0065fb61d2
附上链接，以示对大神的敬意
Build Setup（启动项目查看效果）
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
Introduction
# 在页面中引入组件
import ImageCropper from '@/components/ImageCropper/index'
# 编写模板
<image-cropper
:value="cropperShow"
@close="cropperShow=false"
:url="uploadUrl"
:field="fieldName"
:noCircle="noCircle"
:noSquare="noSquare"
:width="width"
:height="height"
:maxSize="maxSize"
@crop-success="getPicFunc"
@crop-upload-success="successFunc"
></image-cropper>
# 设置参数 / 方法
data () {
return {
// 控制组件显示
cropperShow: false,
// 上传地址
uploadUrl: '/kukacms/visitor/picUpload.htm?type=2',
// 上传文件名
fieldName: 'files',
// 预览圆形图片 false为显示
noCircle: true,
// 预览方形图片 false为显示
noSquare: false,
// 裁剪图片宽高(即所需要图片的宽高)
width: 300,
height: 150,
// 大小限制
maxSize: 10240,
}
},
methods: {
// 图片截取后调用，用于获取图片
getPicFunc (data) {
console.log(data)
},
// 图片上传成功后执行函数
successFunc (data) {
console.log(data)
}
},
