1.效果示例图
2.依赖包下载
//这里使用0.5.6版本
npm install --save vue-cropper@^0.5.6
或者
yarn add vue-cropper@^0.5.6
3.引用
//main.js中添加
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)
//或者在页面中使用
import { VueCropper } from 'vue-cropper'
export default {
components: {
VueCropper
}
}
4.代码示例
//图片地址自己指定引用
<template>
<div style="display:flex;justify-content: center;">
<div class="cropper-content">
<div class="cropper" style="text-align:center">
<vueCropper ref="cropper"
:img="option.img"
:outputSize="option.size"
:outputType="option.outputType"
:info="true"
:full="option.full"
:canMove="option.canMove"
:canMoveBox="option.canMoveBox"
:original="option.original"
:autoCrop="option.autoCrop"
:fixed="option.fixed"
:fixedNumber="option.fixedNumber"
:centerBox="option.centerBox"
:infoTrue="option.infoTrue"
:fixedBox="option.fixedBox"></vueCropper>
</div>
</div>
<div style="margin-left:10px">
<div :style="{'background-image': 'url('+ cover +')'}" style="width: 180px;height: 100px;border: 1px dashed #D4D8E7;border-radius: 4px;text-align: center;font-size: 16px;line-height: 30px;color: #757D8A;background-size:cover"></div>
<!-- <img :src="cover"/> -->
<el-button @click="start">开始裁剪</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
cover: '',
visible: false,
option: {
img: 'http://127.0.0.1:10000/test/upload/20210720/1abfb72b3cd01a09a578ba4e85ee93db.jpeg', // 裁剪图片的地址
info: true, // 裁剪框的大小信息
outputSize: 0.8, // 裁剪生成图片的质量
outputType: 'jpeg', // 裁剪生成图片的格式
canScale: false, // 图片是否允许滚轮缩放
autoCrop: true, // 是否默认生成截图框
// autoCropWidth: 900, // 默认生成截图框宽度
// autoCropHeight: 500, // 默认生成截图框高度
fixedBox: false, // 固定截图框大小 不允许改变
fixed: true, // 是否开启截图框宽高固定比例
fixedNumber: [9, 5], // 截图框的宽高比例
full: true, // 是否输出原图比例的截图
canMoveBox: true, // 截图框能否拖动
original: false, // 上传图片按照原始比例渲染
centerBox: false, // 截图框是否被限制在图片里面
infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
},
}
},
methods:{
start(){
this.$refs.cropper.getCropBlob((data) => {
if (this.option.outputType === "blob") {
this.$refs.cropper.getCropBlob(data => {
var img = window.URL.createObjectURL(data);
this.cover = img;
});
} else {
this.$refs.cropper.getCropData(data => {
this.cover = data;
});
}
})
// this.$refs.cropper.getCropBlob((data) => {
// this.uploadCoverDialogVisible = false
// this.uploadVisible = false
// this.$refs.cropper.getCropBlob(data => {
// var fd = new FormData()
// fd.append('file', data)
// fd.append('fileName', new Date().getTime()+'.jpeg')
// this.$axios({
// url: this.action,
// method: 'post',
// data: fd,
// headers: { 'Content-Type': 'multipart/form-data', 'Authorization': sessionStorage.getItem("token") },
// }).then(res => {
// if (res.data.success) {
// this.cover = res.data.data.link
// } else {
// this.$message({
// showClose: true,
// message: '上传失败',
// type: 'error'
// })
// }
// }).catch(error => {
// this.$message({
// showClose: true,
// message: '上传失败',
// type: 'error'
// })
// })
// });
// })
}
}
}
</script>
<style lang="scss">
.cropper-content {
width: 400px;
margin-left: 10%;
height: 400px;
background: #fff;
}
.cropper {
width: 400px;
height: 400px;
background: #fff;
}
</style>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/92401.html