A simple Vue picture clipping plugin
npm install vue-cropper-clickable-areas
组件内使用
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
}
![]()
``