vue上传图片编辑

Posted 2020-12-17 lhqdbk

<template>
<div>
<el-form>
<el-upload
action="/raptorBrokerServer/service/resold/listHousing/upload/upload.do"
list-type="picture-card"
name="picture"
:multiple="true"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
</el-form>
<el-dialog :visible.sync="dialogVisible" @opened="imageDialogOpened" @close="imageDialogClose" :fullscreen="true">
<el-row>
<el-col :span="16">
<img id="image" :src="dialogImageUrl" height="360" width="100%"/>
<el-row style="margin-top:10px;">
<el-button type="primary" icon="el-icon-zoom-in" @click="cropZoomIn"></el-button>
<el-button type="primary" icon="el-icon-zoom-out" @click="cropZoomOut"></el-button>
<el-button type="success" icon="el-icon-check" @click="cropCut"></el-button>
<el-button type="success" icon="el-icon-refresh" @click="cropRest"></el-button>
</el-row>
</el-col>
<el-col :span="8">
<div class="preview-box-parcel">
<div class="square previewImg"></div>
</div>
</el-col>
</el-row>
</el-dialog>
</div>
</template>

<style>
@import "../../../static/plugins/cropperjs/cropper.min.css";
@import "../../../static/plugins/cropperjs/imgCropping.css";
</style>

<script>
import $ from "jquery";
import Cropper from "cropperjs";

export default {
data() {
return {
dialogImageUrl: "",
dialogVisible: false,
cropper: null,
croppable: false,
imgCropperData: {
accept: "image/gif, image/jpeg, image/png, image/jpg"
}
};
},
mounted() {},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
imageDialogOpened() {
//初始化这个裁剪框
let self = this;
let image = document.getElementById("image");
let previews = document.querySelectorAll(".preview");
this.cropper = new Cropper(image, {
aspectRatio: 649 / 500,
cropBoxResizable: false,
viewMode: 1,
background: false,
zoomable: true,
wheelZoomRatio: 0,
preview: $(".previewImg"),
ready: function() {
self.croppable = true;
},
crop: function(event) {
let data = event.detail;
let cropper = this.cropper;
let imageData = cropper.getImageData();
}
});
},
imageDialogClose() {
this.cropper.destroy();
},
cropRest() {
this.cropper.reset();
},
cropZoomIn() {
this.cropper.zoom(0.1);
},
cropZoomOut() {
this.cropper.zoom(-0.1);
},
cropCut() {
let cas = this.cropper.getCroppedCanvas();// 获取被裁剪后的canvas
let base64 = cas.toDataURL(‘image/jpeg‘); // 转换为base64
this.uploadCrop(base64);
},
uploadCrop(imageData) {
this.$axios({
method: "post",
headers: {
"Content-Type": "application/json"
},
url: "/raptorBrokerServer/service/resold/listHousing/upload/uploadCrop.do",
data: { imageData: imageData }
})
.then(response => {
if (response.data.success) {
alert("1");
} else {
}
})
.catch(error => {
console.log(error);
});
}
}
};
</script>