vue-cropper

$3

预览
english

vue-cropper

#### 安装 npm install vue-cropper
#### 使用 import VueCropper from vue-cropper
``
ref="cropper"
:img="option.img"
:outputSize="option.size"
:outputType="option.outputType"
>
`

名称	功能	默认值	可选值
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

$3

##### this.$refs.cropper.startCrop() 开始截图
##### this.$refs.cropper.stopCrop() 停止截图
##### this.$refs.cropper.clearCrop() 清除截图
##### this.$refs.cropper.changeScale() 修改图片大小 正数为变大 负数变小
##### 获取截图信息
this.$refs.cropper.cropW 截图框宽度

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

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

更新日志

$3

$3

$3

$3

$3

$3

$3

$3

#### canMove 是否可以移动图片 默认为是
#### canMoveBox 是否可以移动截图框 默认为是
#### original 是否按图片原始比例渲染 默认为否

$3

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

$3

#### 修复图片有可能不展示

$3

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

`

$3

#### 小优化

$3

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

$3

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

$3

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

$3

`
this.$refs.cropper.rotateRight() 向右边旋转90度
this.$refs.cropper.rotateLeft() 向左边旋转90度
`

$3

$3

$3

`
canScale: true
`

$3

`
@realTime="realTime"
// Real time preview function
realTime (data) {
this.previews = data
}

``