组件内使用
import { VueCropper } from 'vue-cropper'
components: {
VueCropper,
},
main.js里面使用
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)
cdn方式使用
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/index.js"></script>
Vue.use(window['vue-cropper'])
nuxt 使用方式
if(process.browser) {
vueCropper = require('vue-cropper')
Vue.use(vueCropper.default)
}
<vueCropper
ref="cropper"
:img="option.img"
:outputSize="option.size"
:outputType="option.outputType"
></vueCropper>shn_ui - vue-cropper 作者 野宁新之助
vue全家桶开发管理后台—裁切图片 作者： 麻球科技-菅双鹏
Vue-cropper 图片裁剪的基本原理 作者： 龙恩0707
关于昵称和头像的总结（模仿微信） 作者： 秋晨光
npm install vue-cropper
yarn add vue-cropper
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 |
| enlarge | 图片根据截图框输出比例倍数 | 1 | 0-max(建议不要太大不然会卡死的呢) |
| mode | 图片默认渲染方式 | contain | contain , cover, 100px, 100% auto |
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)
})
### Description of the default rendering mode of the image
Image layout mode mode achieves the same effect as css background
Contain Centered layout Default does not scale Ensure the image is inside the container mode: 'contain'
Cover stretch layout fill the entire container mode: 'cover'
If only one value is given, this value will be used as the width value and the height value will be set to auto. mode: '50px'
If two values are given, the first one will be the width value and the second will be the height value. mode: '50px 60px'
### 预览
``` 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
};
固定为100宽度
this.previewStyle3 = {
width: previews.w + "px",
height: previews.h + "px",
overflow: "hidden",
margin: "0",
zoom: 100 / preview.w
};
固定为100高度
this.previewStyle4 = {
width: previews.w + "px",
height: previews.h + "px",
overflow: "hidden",
margin: "0",
zoom: 100 / preview.h
};
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>
<p>中等大小</p>
<div :style="previewStyle1">
<div :style="previews.div">
<img :src="previews.url" :style="previews.img">
</div>
</div>
<p>迷你大小</p>
<div :style="previewStyle2">
<div :style="previews.div">
<img :src="previews.url" :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 // 右下角
}
}
修复滚轮默认事件问题 修复html静态文件引入事件触发问题
修复mode 属性 contain 和cover的显示bug问题
修复ios 下面base64图片跨域显示问题
修复第一次不触发预览的问题 新增加图片渲染mode功能
修复图片旋转bug 修复显示的一些bug
添加倍数使用 enlarge 可以输出裁剪框等比例图片；
感谢来自于 的贡献 添加预览框各种比例, 和修复图片截图小数问题
修复引入方式的问题
组件内使用
import { VueCropper } from vue-cropper
components: {
VueCropper,
},
main.js里面使用
import VueCropper from vue-cropper
Vue.use(vueCropper)
cdn方式使用
<script src="vuecropper.js"></script>
Vue.use(window['vue-cropper'])
剥离exif的依赖库, 添加exfi-min.js减小代码体积 45.9k => 37k build 升级webpack4 升级
添加vue install 方法 =》 npm: Vue.use(VueCropper) web: Vue.use(window['vue-cropper'])
修复截图框因为去除小数点的引起的问题
修复截图框边界问题
修复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>