A simple Vue picture clipping plugin
npm install vue-cropper-cailw
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
}
``