vue全家桶开发管理后台—裁切图片 作者： 麻球科技-菅双鹏
Vue-cropper 图片裁剪的基本原理 作者： 龙恩0707
<vueCropper
ref="cropper"
:img="option.img"
:outputSize="option.size"
:outputType="option.outputType"
></vueCropper>module.exports = {
...
build: {
vendor: [
'vue-cropper
...
plugins: [
{ src: '~/plugins/vue-cropper', ssr: false }
]
}
}
| 名称 | 功能 | 默认值 | 可选值 |
| 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 |
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)
})
### 预览
``` html
@realTime="realTime"
// Real time preview function
realTime (data) {
this.previews = data
}
<div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden',
'margin': '5px'}">
<div :style="previews.div">
<img :src="option.img" :style="previews.img">
</div>
</div>
=data type
{
moving: true, // moving 是否在移动
axis: {
x1: 1, // 左上角
x2: 1，// 右上角
y1: 1，// 左下角
y2: 1 // 右下角
}
}
data type
{
moving: true, // moving 是否在移动
axis: {
x1: 1, // 左上角
x2: 1，// 右上角
y1: 1，// 左下角
y2: 1 // 右下角
}
}
修复orientation的处理方式 感谢 Felipe Mengatto的贡献
修复orientation值不同带来的问题 感谢 Felipe Mengatto的贡献
修改坐标反馈问题
修复centerBox 的截图超出1px问题
添加截图 图片移动触发事件
修复旋转自动生成截图框的错误
修改autocrop 可以动态生成截图框
修复其他图片没有压缩的问题
修改maxImgSize为2000
maxImgSize 限制图片最大宽度和高度 默认为2000px
新增截图框信息展示
infoTrue true 为展示真实输出图片宽高 false 展示看到的截图框宽高
新增获取图片坐标函数 this.$refs.cropper.getImgAxis()
新增获取截图框坐标函数 this.$refs.cropper.getCropAxis()
新增对高清设备的兼容 high
新增截图框限制在图片以内的功能 centerbox
新增自动生成截图框函数 this.$refs.cropper.goAutoCrop
新增图片加载的回调 imgLoad 返回结果success, error
修复截图框固定 截图框会影响原图移动 缩放
鼠标缩放问题优化
img max-width 样式优化
新增属性
canMove 是否可以移动图片 默认为是
canMoveBox 是否可以移动截图框 默认为是
original 是否按图片原始比例渲染 默认为否
修复火狐浏览器 鼠标缩放问题
修复图片有可能不展示
修复ios拍照旋转 截图问题 添加自动修复图片 截图预览代码变更, 修改默认上传图片为blob预览
realTime (data) {
this.previews = data
}
<div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden',
'margin': '5px'}">
<div :style="previews.div">
<img :src="previews.url" :style="previews.img">
</div>
</div>小优化
新增修改图片大小函数 通过this.$refs.cropper.changeScale 调用
新增固定截图框大小fiexdBox(注： 最好搭配自动生成截图框使用)
新增输出原图比例截图 props名full, 修复缩放图片过大灵敏度问题
新增图片旋转 修复mac滚轮过度灵敏
this.$refs.cropper.rotateRight() // 向右边旋转90度
this.$refs.cropper.rotateLeft() // 向左边旋转90度修复默认生成截图框超过容器错误
修复blob数据获取错误
添加手机端手势缩放
canScale: true
添加预览
@realTime="realTime"
// Real time preview function
realTime (data) {
this.previews = data
}
<div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden',
'margin': '5px'}">
<div :style="previews.div">
<img :src="option.img" :style="previews.img">
</div>
</div>