vue---vueCropper实现图像裁剪
案例功能：选择图像->图像裁剪->上传图像（base64），完整代码见篇末。实现效果如下图：点击【添加照片】方形区域（图一）打开文件夹选择图片，选择完成后弹出裁剪图片的对话框（图二），点击【点击上传】按钮向后台提交图片。选择图像：一共可上传3张照片，当没有照片上传时，仅有一个【添加照片】区；当第一张图片上传成功，【添加照片】出现在该图片后的第二个位置；当第二张图片上传成功，...
·
案例功能：选择图像->图像裁剪->上传图像（base64），完整代码见篇末。
(提示：下文实现方法太low了，现在觉得惨不忍睹，就当是学习笔记吧，实现功能前还是要勤思考，要不然写出来的代码重复啰嗦，自己都看不下去。还是参照优化版本 vue---图像上传/裁剪/预览/删除/查询
实现效果：点击【添加照片】方形区域（图一）打开文件夹选择图片，选择完成后弹出裁剪图片的对话框（图二），点击【点击上传】按钮向后台提交图片。
选择图像：一共可上传3张照片，当没有照片上传时，仅有一个【添加照片】区；当第一张图片上传成功，【添加照片】出现在该图片后的第二个位置；当第二张图片上传成功，【添加照片】出现在该图片后的第三个位置；当第三张图片上传成功，【添加照片】不再出现。鼠标移入图片出现删除图标，可点击进行删除操作。
图像裁剪：可对图片进行放大、缩小、左旋转、右旋转、下载及预览功能。
（图一）
（图二）
执行步骤：
1.安装【npm install vue-cropper --save-dev】
2.在main.js中或使用到的组件中引入vue-cropper
①main.js:
import Vue from 'vue'
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)②组件中
3.使用VueCropper
为了方便测试，已注释后台联调代码部分。只要不气馁，问题总会解决~VueCropper具体属性见npm
附完整代码：
<template>
<div class="personal">
<div class="content">
<!-- 1.标题及图像说明 -->
<div class="content-desc">
<div class="title">上传照片</div>
<div class="desc">照片要求为清晰无遮挡的人脸正脸照，格式为jpg/png,大小不超过1M，最多可上传3张照片</div>
</div>
<!-- 2.图像区域 -->
<div class="content-image">
<el-form :model="modal">
<el-form-item prop="base64">
<el-input
type="text"
style="display:none;"
name="base64"
v-model="modal.base64"
autocomplete="off"
></el-input>
<ul class="upload-photo">
<!-- 最多上传三张图片 -->
<li @mouseover="mouseoverImg(1)" @mouseout="mouseoutImg()">
<img ref="img1" src="../../assets/images/addImage.png" @click="uploadPhoto" />
<div ref="deleteImg1" class="delete-img">
<i class="el-icon-delete" @click="deleteImage(1)"></i>
</div>
</li>
<li v-show="this.photoCount>0" @mouseover="mouseoverImg(2)" @mouseout="mouseoutImg()">
<img ref="img2" src="../../assets/images/addImage.png" @click="uploadPhoto" />
<div ref="deleteImg2" class="delete-img">
<i class="el-icon-delete" @click="deleteImage(2)"></i>
</div>
</li>
<li v-show="this.photoCount>1" @mouseover="mouseoverImg(3)" @mouseout="mouseoutImg()">
<img ref="img3" src="../../assets/images/addImage.png" @click="uploadPhoto" />
<div ref="deleteImg3" class="delete-img">
<i class="el-icon-delete" @click="deleteImage(3)"></i>
</div>
</li>
</ul>
<input type="file" hidden ref="photoFile" @change="fileChange" style="display: none;" />
</el-form-item>
</el-form>
</div>
</div>
<!-- 上传图像前调整图像的尺寸 -->
<el-dialog title="修改头像" :visible.sync="cropImageFormVisible" class="cropImageForm" width="50%">
<div class="img-crop">
<!-- 1.截图区域 -->
<div class="imgCrop-content">
<div class="cropper-content">
<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"
:autoCropWidth="option.autoCropWidth"
:autoCropHeight="option.autoCropHeight"
:fixedBox="option.fixedBox"
@realTime="realTime"
@imgLoad="imgLoad"
></vueCropper>
</div>
<div class="preview-content">
<div class="show-preview">
<div :style="previews.div" class="preview">
<img :src="previews.url" :style="previews.img" />
</div>
</div>
<p class="desc">预览图片</p>
</div>
</div>
<!-- 2.操作按钮区域 -->
<div class="btn-content">
<input class="btn" type="button" value="+" title="放大" @click="changeScale(1)" />
<input class="btn" type="button" style value="-" title="缩小" @click="changeScale(-1)" />
<input class="btn" type="button" value="↺" title="左旋转" @click="rotateLeft" />
<input class="btn" type="button" value="↻" title="右旋转" @click="rotateRight" />
<input class="btn" type="button" value="↓" title="下载" @click="down('blob')" />
</div>
</div>
<div class="btn-footer">
<el-button @click="cropImageFormVisible= false" size="small">取 消</el-button>
<el-button type="danger" @click="submitPhoto" size="small">点击上传</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { VueCropper } from "vue-cropper";
import { imageAdd, imageQuery, imageDelete } from "../../api/http";
export default {
data() {
return {
cropImageFormVisible: false,
modal: { base64: "" },
// 控制图像显示位置
photoCount: 0,
// uploadImage用于存放“添加照片”图片base64
uploadImage: "",
//剪切图片上传
previews: {},
option: {
img: "",
outputSize: 1, //剪切后的图片质量（0.1-1）
full: false, //输出原图比例截图 props名full
outputType: "png",
canMove: true,
original: false,
canMoveBox: true,
autoCrop: true,
autoCropWidth: 150,
autoCropHeight: 150,
fixedBox: true
},
downImg: "#"
};
},
components: {
VueCropper
},
created() {
// 查询人脸图像信息
this.getImageData();
},
mounted() {
// uploadImage用于存放“添加照片”图片base64,
// 假设一开始没有照片上传，则this.$refs.deleteImg1为“添加照片”图片base64
this.uploadImage = this.$refs.deleteImg1;
// "data:image/png;base64,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";
this.$refs.deleteImg1.style.display = "none";
this.$refs.deleteImg2.style.display = "none";
this.$refs.deleteImg3.style.display = "none";
// console.log(" ===this.$refs.img1.src:", this.$refs.img1.src);
},
methods: {
//******查询人脸图像信息********
getImageData() {
let param = {
token: this.$store.state.token,
currentPage: 1,
pageSize: 10
};
imageQuery(param).then(res => {
console.log("查询图像信息", res);
// if (res.data.respCode == "00000") {
// this.userData = res.data.result.records;
// this.page_total = res.data.result.total;
// this.loading = false;
// } else {
// this.loading = false;
// this.$message.error(res.data.respDesc);
// }
});
},
// 鼠标移入图像
mouseoverImg(index) {
if (index == 1) {
this.displayControl(this.$refs.img1, this.$refs.deleteImg1);
} else if (index == 2) {
this.displayControl(this.$refs.img2, this.$refs.deleteImg2);
} else {
this.displayControl(this.$refs.img3, this.$refs.deleteImg3);
}
},
displayControl(img, deleteImg) {
if (img.src == this.uploadImage) {
deleteImg.style.display = "none";
} else {
deleteImg.style.display = "block";
}
},
// 鼠标移出图像--删除图标隐藏
mouseoutImg() {
this.$refs.deleteImg1.style.display = "none";
this.$refs.deleteImg2.style.display = "none";
this.$refs.deleteImg3.style.display = "none";
},
// 本地上传头像
uploadPhoto() {
this.$refs.photoFile.click();
},
// 修改头像
fileChange(e) {
let file = this.$refs.photoFile.files[0];
if (/.(png|jpg|jpeg)$/.test(file.name)) {
// let url = URL.createObjectURL(file)
let fr = new FileReader();
fr.readAsDataURL(file);
fr.onload = e => {
this.option.img = e.target.result;
this.cropImageFormVisible = true;
this.$refs.photoFile.value = "";
this.$set(this.modal, "base64", e.target.result.split(",")[1]);
};
} else {
this.$message({
message: "请选择符合格式要求的图片",
type: "warning"
});
this.$refs.photoFile.value = "";
}
},
// 上传图像
submitPhoto() {
this.$refs.cropper.getCropData(data => {
if (this.photoCount == 0) {
this.$refs.img1.src = data;
} else if (this.photoCount == 1) {
this.$refs.img2.src = data;
} else {
this.$refs.img3.src = data;
}
if (this.photoCount < 3) {
this.photoCount++;
}
this.cropImageFormVisible = false;
// let param = {
// token: this.$store.state.token,
// image: data
// };
// imageAdd(param).then(res => {
// console.log("提交新增图片:", res);
// if (res.data.respCode == "00000") {
// this.$message.success(res.data.respDesc);
// if (this.photoCount == 0) {
// this.$refs.img1.src = data;
// } else if (this.photoCount == 1) {
// this.$refs.img2.src = data;
// } else {
// this.$refs.img3.src = data;
// }
// if (this.photoCount < 3) {
// this.photoCount++;
// }
// this.cropImageFormVisible = false;
// } else {
// this.$message.error(res.data.respDesc);
// }
// });
});
// console.log("photoCount=", this.photoCount);
},
// 删除图片
deleteImage(i) {
this.$confirm("是否删除该照片?", "删除", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
// let param = {
// token: this.$store.state.token,
// imageId: id
// };
// iamgeDelete(param).then(res => {
// console.log(" 提交删除:", res);
// if (res.data.respCode == "00000") {
// this.$message.success(res.data.respDesc);
// } else {
// this.$message.error(res.data.respDesc);
// }
// this.reload();
// });
if (i == 3) {
this.$refs.img3.src = this.uploadImage;
} else if (i == 2) {
if (this.photoCount == 3) {
this.$refs.img2.src = this.$refs.img3.src;
this.$refs.img3.src = this.uploadImage;
} else {
this.$refs.img2.src = this.uploadImage;
}
} else {
if (this.photoCount == 3) {
this.$refs.img1.src = this.$refs.img2.src;
this.$refs.img2.src = this.$refs.img3.src;
this.$refs.img3.src = this.uploadImage;
} else if (this.photoCount == 2) {
this.$refs.img1.src = this.$refs.img2.src;
this.$refs.img2.src = this.uploadImage;
} else {
this.$refs.img1.src = this.uploadImage;
}
}
this.photoCount--;
this.$message({
type: "success",
message: "删除成功!"
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除"
});
});
// }
},
//放大/缩小
changeScale(num) {
num = num || 1;
this.$refs.cropper.changeScale(num);
},
//左旋转
rotateLeft() {
this.$refs.cropper.rotateLeft();
},
//右旋转
rotateRight() {
this.$refs.cropper.rotateRight();
},
// 实时预览函数
realTime(data) {
this.previews = data;
},
//下载图片
down(type) {
var aLink = document.createElement("a");
aLink.download = "author-img";
if (type === "blob") {
this.$refs.cropper.getCropBlob(data => {
this.downImg = window.URL.createObjectURL(data);
aLink.href = window.URL.createObjectURL(data);
aLink.click();
});
} else {
this.$refs.cropper.getCropData(data => {
this.downImg = data;
aLink.href = data;
aLink.click();
});
}
},
imgLoad(msg) {
console.log("imgLoad");
console.log(msg);
}
}
};
</script>
<style lang="less">
.personal {
margin: 10px 0;
padding: 10px;
background: #f0f0f0;
width: 100%;
height: 100%;
box-sizing: border-box;
overflow-y: hidden;
border-radius: 3px;
padding-bottom: 20px;
.content {
background-color: #fff;
width: 100%;
height: 100%;
border-radius: 6px;
padding: 10px;
// overflow-y: scroll;
overflow: hidden;
display: flex;
padding: 10px 0;
flex-direction: column;
// 1.标题及图像说明
.content-desc {
margin: 0px 10px;
.title {
font-size: 16px;
border-left: 5px solid #2d8cf0;
padding-left: 10px;
margin-bottom: 16px;
}
.desc {
margin-left: 18px;
}
}
// 2.图像区域
.content-image {
margin: 25px 28px;
.upload-photo {
width: 580px;
height: 200px;
// border: 1px solid red;
box-sizing: border-box;
border-radius: 5px;
cursor: pointer;
margin-left: 20px;
margin-top: 0px;
padding-top: 0px;
display: flex;
flex-direction: row;
justify-content: flex-start;
li {
width: 180px;
height: 180px;
margin-right: 15px;
position: relative;
.delete-img {
position: absolute;
width: 180px;
height: 40px;
line-height: 40px;
left: 0px;
top: 140px;
background: rgba(59, 60, 61, 0.5);
// box-sizing: content-box;
z-index: 999;
cursor: pointer;
text-align: right;
i {
margin: 8px 10px 0 0;
display: block;
font-size: 24px;
color: white;
}
}
}
img {
border: 1px dashed #d9d9d9;
border-radius: 5px;
box-sizing: border-box;
width: 180px;
height: 180px;
margin-top: 0px;
&:hover {
border: 1px dashed #409eff;
}
}
}
}
}
// 裁剪图像对话框
.cropImageForm {
.img-crop {
// 1.截图区域
.imgCrop-content {
margin: 0 20px;
display: flex;
display: -webkit-flex;
justify-content: flex-start;
-webkit-justify-content: flex-start;
.cropper-content {
width: 350px;
height: 350px;
margin-right: 40px;
}
.preview-content {
.show-preview {
// border: 1px solid #ccc;
box-sizing: border-box;
width: 150px;
height: 150px;
overflow: hidden;
flex: 1;
-webkit-flex: 1;
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
.preview {
overflow: hidden;
border-radius: 50%;
border: 1px solid #cccccc;
background: #fff;
margin-left: 0px;
}
}
.desc {
margin-top: 10px;
text-align: center;
}
.el-button {
margin: 10px 40px;
}
}
}
// 2.操作按钮区域
.btn-content {
width: 350px;
margin: 10px 20px;
text-align: center;
// #uploads {
// position: absolute;
// clip: rect(0 0 0 0);
// }
.btn {
height: 32px;
width: 32px;
font-size: 20px;
margin: 3px 5px;
background-color: #fff;
border: 1px solid #999;
border-radius: 4px;
}
}
}
.btn-footer {
width: 100%;
text-align: right;
padding-right: 20px;
margin-top: -20px;
}
}
}
</style>
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献45条内容
所有评论(0)