提交 8a4f130d 编写于 作者: bo.dang's avatar bo.dang

裁剪优化和背景图优化

上级 5a9ea032
...@@ -96,9 +96,12 @@ ...@@ -96,9 +96,12 @@
guides: true, guides: true,
highlight: true, highlight: true,
cropBoxMovable: true, cropBoxMovable: true,
zoomable: true,
cropBoxResizable: this.cropOption.cropBoxResizable,//是否显示等比例缩放 cropBoxResizable: this.cropOption.cropBoxResizable,//是否显示等比例缩放
minCropBoxWidth: this.cropOption.minCropBoxWidth,// 剪切区域的最小宽度 minCropBoxWidth: this.cropOption.minCropBoxWidth,// 剪切区域的最小宽度
minCropBoxHeight: this.cropOption.minCropBoxHeight, // 剪切区域的最小高度 minCropBoxHeight: this.cropOption.minCropBoxHeight, // 剪切区域的最小高度
// minContainerHeight: 3000,
// minCanvasHeight: 3000,
toggleDragModeOnDblclick: false, toggleDragModeOnDblclick: false,
// aspectRatio: 75/42, // aspectRatio: 75/42,
aspectRatio: this.cropOption.aspectRatio,// 显示等比例缩放的比例 aspectRatio: this.cropOption.aspectRatio,// 显示等比例缩放的比例
...@@ -109,12 +112,28 @@ ...@@ -109,12 +112,28 @@
width: this.cropOption.width, width: this.cropOption.width,
height: this.cropOption.height height: this.cropOption.height
}) })
this.cropper.setCropBoxData({ // this.cropper.setCropBoxData({
width: 100, // width: 750,
height: 100 // height: 100
}) // })
// this.cropper.zoomTo(1); // this.cropper.move(1, -1).rotate(0).scale(1, -1);
},
cropstart:(event) => {
console.log(event.detail.originalEvent);
console.log(event.detail.action);
if(this.cropOption.aspectRatio == 0){
if(event.detail.action == "w"
|| event.detail.action == "e"
|| event.detail.action == "se"
|| event.detail.action == "sw"
|| event.detail.action == "ne"
|| event.detail.action == "nw"){
event.preventDefault();
}
}
}, },
// zoom: function (event) { // zoom: function (event) {
// // Keep the image in its natural size // // Keep the image in its natural size
// if (event.detail.oldRatio === 1) { // if (event.detail.oldRatio === 1) {
......
...@@ -576,11 +576,11 @@ ...@@ -576,11 +576,11 @@
}, },
antiScreenCap: "0", antiScreenCap: "0",
backgroundImageId: "0", backgroundImageId: "",
// backgroundImageIdTemp: "0", // backgroundImageIdTemp: "0",
// backgroundImages: [],// 直播背景图 // backgroundImages: [],// 直播背景图
}, },
backgroundImageIdTemp: '0', backgroundImageIdTemp: '',
backgroundImageUrlTemp: "", backgroundImageUrlTemp: "",
backgroundImages: [], backgroundImages: [],
backgroundImageUrl: "", backgroundImageUrl: "",
...@@ -798,10 +798,11 @@ ...@@ -798,10 +798,11 @@
//上传直播简介 //上传直播简介
beforeUploadPic1(file) { beforeUploadPic1(file) {
vm.cropperIndex = 10; vm.cropperIndex = 10;
// this.currentOption.aspectRatio = /3; this.currentOption.aspectRatio = 0;
this.currentOption.cropBoxResizable = true; this.currentOption.cropBoxResizable = true;
this.currentOption.minCropBoxWidth = 750; this.currentOption.minCropBoxWidth = 750;
// this.currentOption.minCropBoxHeight = 120; this.currentOption.minCropBoxHeight = 120;
this.currentOption.width = 750;
let fileLimit = { let fileLimit = {
width: 750, width: 750,
height: 3000, height: 3000,
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册