使用 注意： 需要关掉本地的mock服务， 不然图片转化会报错

``
组件内使用
import { VueCropper } from 'vue-cropper'
components: {
VueCropper,
},

main.js里面使用
import VueCropper from 'vue-cropper'

Vue.use(VueCropper)

cdn方式使用

Vue.use(window['vue-cropper'])

`

` html
ref="cropper"
:img="option.img"
:outputSize="option.size"
:outputType="option.outputType"
>
`

vue-cropper

$3

在线例子

$3

`
module.exports = {
...
build: {
vendor: [
'vue-cropper
...
plugins: [
{ src: '~/plugins/vue-cropper', ssr: false }
]
}
}
`

$3

名称	功能	默认值	可选值
img	裁剪图片的地址	空	url 地址 || base64 || blob
outputSize	裁剪生成图片的质量	1	0.1 - 1
outputType	裁剪生成图片的格式	jpg (jpg 需要传入jpeg)	jpeg || png || webp
info	裁剪框的大小信息	true	true || false
canScale	图片是否允许滚轮缩放	true	true || false
autoCrop	是否默认生成截图框	false	true || false
autoCropWidth	默认生成截图框宽度	容器的80%	0~max
autoCropHeight	默认生成截图框高度	容器的80%	0~max
fixed	是否开启截图框宽高固定比例	true	true | false
fixedNumber	截图框的宽高比例	[1, 1]	[宽度, 高度]
full	是否输出原图比例的截图	false	true | false
fixedBox	固定截图框大小 不允许改变	false	true | false
canMove	上传图片是否可以移动	true	true | false
canMoveBox	截图框能否拖动	true	true | false
original	上传图片按照原始比例渲染	false	true | false
centerBox	截图框是否被限制在图片里面	false	true | false
high	是否按照设备的dpr 输出等比例图片	true	true | false
infoTrue	true 为展示真实输出图片宽高 false 展示看到的截图框宽高	false	true | false
maxImgSize	限制图片最大宽度和高度	2000	0-max
enlarge	图片根据截图框输出比例倍数	1	0-max(建议不要太大不然会卡死的呢)

$3

##### this.$refs.cropper.startCrop() 开始截图
##### this.$refs.cropper.stopCrop() 停止截图
##### this.$refs.cropper.clearCrop() 清除截图
##### this.$refs.cropper.changeScale() 修改图片大小 正数为变大 负数变小
##### this.$refs.cropper.getImgAxis() 获取图片基于容器的坐标点
##### this.$refs.cropper.getCropAxis() 获取截图框基于容器的坐标点
##### this.$refs.cropper.goAutoCrop 自动生成截图框函数
##### this.$refs.cropper.rotateRight() 向右边旋转90度
##### this.$refs.cropper.rotateLeft() 向左边旋转90度

#### 图片加载的回调 imgLoad 返回结果success, error

#### 获取截图信息
this.$refs.cropper.cropW 截图框宽度

this.$refs.cropper.cropH 截图框高度
` js
// 获取截图的base64 数据
this.$refs.cropper.getCropData((data) => {
// do something
console.log(data)
})

// 获取截图的blob数据
this.$refs.cropper.getCropBlob((data) => {
// do something
console.log(data)
})


$3


` html
@realTime="realTime"
// Real time preview function
realTime(data) {
var previews = data;
var h = 0.5;
var w = 0.2;

this.previewStyle1 = {
width: previews.w + "px",
height: previews.h + "px",
overflow: "hidden",
margin: "0",
zoom: h
};

this.previewStyle2 = {
width: previews.w + "px",
height: previews.h + "px",
overflow: "hidden",
margin: "0",
zoom: w
};
this.previews = data;
},

中等大小

迷你大小

=
`

#### 图片移动回调函数 @imgMoving
`
data type
{
moving: true, // moving 是否在移动
axis: {
x1: 1, // 左上角
x2: 1，// 右上角
y1: 1，// 左下角
y2: 1 // 右下角
}
}
`

#### 截图框移动回调函数 @cropMoving
`
data type
{
moving: true, // moving 是否在移动
axis: {
x1: 1, // 左上角
x2: 1，// 右上角
y1: 1，// 左下角
y2: 1 // 右下角
}
}
`




更新日志

$3

修复图片旋转bug
修复显示的一些bug

$3

添加倍数使用 enlarge
可以输出裁剪框等比例图片；

感谢来自于 [](https://github.com/hzsrc)的贡献
添加预览框各种比例, 和修复图片截图小数问题

$3

修复引入方式的问题
`
组件内使用
import { VueCropper } from vue-cropper
components: {
VueCropper,
},

main.js里面使用
import VueCropper from vue-cropper

Vue.use(vueCropper)

cdn方式使用

Vue.use(window['vue-cropper'])
`


$3


剥离exif的依赖库, 添加exfi-min.js减小代码体积 45.9k => 37k
build 升级webpack4 升级
`
添加vue install 方法 =》 npm: Vue.use(VueCropper) web: Vue.use(window['vue-cropper'])
`

$3

修复截图框因为去除小数点的引起的问题

$3

修复截图框边界问题

$3

修复orientation的处理方式
感谢 Felipe Mengatto的贡献

$3

修复orientation值不同带来的问题
感谢 Felipe Mengatto的贡献

$3

`
修改坐标反馈问题
`

$3

`
修复centerBox 的截图超出1px问题
添加截图 图片移动触发事件
`

$3

`
修复旋转自动生成截图框的错误
修改autocrop 可以动态生成截图框
`

$3

`
修复其他图片没有压缩的问题
`

$3

`提供移动端崩溃的解决方案
修改maxImgSize为2000
`

$3

`提供移动端崩溃的解决方案
maxImgSize 限制图片最大宽度和高度 默认为2000px
`

$3

`
新增截图框信息展示
infoTrue true 为展示真实输出图片宽高 false 展示看到的截图框宽高
`

$3

`
新增获取图片坐标函数 this.$refs.cropper.getImgAxis()
新增获取截图框坐标函数 this.$refs.cropper.getCropAxis()
新增对高清设备的兼容 high
新增截图框限制在图片以内的功能 centerbox
新增自动生成截图框函数 this.$refs.cropper.goAutoCrop
`

$3

新增图片加载的回调 imgLoad 返回结果success, error

$3

修复截图框固定 截图框会影响原图移动 缩放

$3

鼠标缩放问题优化
img max-width 样式优化
新增属性
canMove 是否可以移动图片 默认为是
canMoveBox 是否可以移动截图框 默认为是
original 是否按图片原始比例渲染 默认为否

$3

修复火狐浏览器 鼠标缩放问题

$3

修复图片有可能不展示

$3

修复ios拍照旋转 截图问题 添加自动修复图片 截图预览代码变更, 修改默认上传图片为blob预览
` html
realTime (data) {
this.previews = data
}

`

$3

小优化

$3

新增修改图片大小函数 通过this.$refs.cropper.changeScale 调用

$3

新增固定截图框大小fiexdBox(注： 最好搭配自动生成截图框使用)

$3

新增输出原图比例截图 props名full, 修复缩放图片过大灵敏度问题

$3

新增图片旋转 修复mac滚轮过度灵敏
` js
this.$refs.cropper.rotateRight() // 向右边旋转90度
this.$refs.cropper.rotateLeft() // 向左边旋转90度
`

$3

修复默认生成截图框超过容器错误

$3

修复blob数据获取错误

$3

添加手机端手势缩放
`
canScale: true
`

$3

添加预览
` html
@realTime="realTime"
// Real time preview function
realTime (data) {
this.previews = data
}

``