vue上传图片编辑

标签：rip   tor   accept   jpg   event   height   arc   document   style   

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);
});
}
}
};

vue上传图片编辑

标签：rip   tor   accept   jpg   event   height   arc   document   style   

原文地址：https://www.cnblogs.com/lhqdbk/p/13332367.html