From e3819ec876de8af81c2e4aba18958be64b596895 Mon Sep 17 00:00:00 2001 From: chutingting Date: Wed, 6 Dec 2023 22:43:49 +0800 Subject: [PATCH] edit bug --- src/components/cutImg.vue | 49 ++++++++++++++++++++++++--------- src/views/createVideo/index.vue | 31 +++++++++++---------- 2 files changed, 53 insertions(+), 27 deletions(-) diff --git a/src/components/cutImg.vue b/src/components/cutImg.vue index 017f163..fbaae69 100644 --- a/src/components/cutImg.vue +++ b/src/components/cutImg.vue @@ -92,24 +92,47 @@ function myUpload(params) {} const cropper = ref(null); const option = reactive({ img: "", + canMove: true, outputSize: 0.5, //图片质量 - info: false, // 裁剪框的大小信息 - // outputType: 'jpeg', // 裁剪生成图片的格式 - outputType: "png", // 裁剪生成图片的格式 + outputType: "png", canScale: true, // 图片是否允许滚轮缩放 - autoCrop: true, // 是否默认生成截图框 + fixedBox: false, + original: false, + canMoveBox: true, + autoCrop: true, + // 只有自动截图开启 宽度高度才生效 autoCropWidth: window.innerWidth - 100 + "px", // 默认生成截图框宽度 autoCropHeight: window.innerWidth - 100 + "px", // 默认生成截图框高度 - high: true, // 是否按照设备的dpr 输出等比例图片 - fixedBox: false, // 固定截图框大小 不允许改变 - fixed: false, // 是否开启截图框宽高固定比例 - // fixedNumber: [1, 1], // 截图框的宽高比例 - full: true, // 是否输出原图比例的截图 - canMoveBox: true, // 截图框能否拖动 - original: false, // 上传图片按照原始比例渲染 - centerBox: true, // 截图框是否被限制在图片里面 + centerBox: true, + high: true, + cropData: {}, + enlarge: 1, + mode: 'contain', + maxImgSize: 3000, + // limitMinSize: [50, 50], + fixed: false, + // fixedNumber: [2, 1], + fillColor: '', + full: true, infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高 - mode: "100% auto", // 图片默认渲染方式 + // outputSize: 0.5, //图片质量 + // info: false, // 裁剪框的大小信息 + // // outputType: 'jpeg', // 裁剪生成图片的格式 + // outputType: "png", // 裁剪生成图片的格式 + // canScale: true, // 图片是否允许滚轮缩放 + // autoCrop: true, // 是否默认生成截图框 + // autoCropWidth: window.innerWidth - 100 + "px", // 默认生成截图框宽度 + // autoCropHeight: window.innerWidth - 100 + "px", // 默认生成截图框高度 + // high: true, // 是否按照设备的dpr 输出等比例图片 + // fixedBox: false, // 固定截图框大小 不允许改变 + // fixed: false, // 是否开启截图框宽高固定比例 + // // fixedNumber: [1, 1], // 截图框的宽高比例 + // full: true, // 是否输出原图比例的截图 + // canMoveBox: true, // 截图框能否拖动 + // original: false, // 上传图片按照原始比例渲染 + // centerBox: true, // 截图框是否被限制在图片里面 + // infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高 + // mode: "100% auto", // 图片默认渲染方式 }); //#region 裁剪图片 const cropperOverData = ref(null); diff --git a/src/views/createVideo/index.vue b/src/views/createVideo/index.vue index 5010f1d..42d0a23 100644 --- a/src/views/createVideo/index.vue +++ b/src/views/createVideo/index.vue @@ -24,7 +24,7 @@

@@ -59,7 +59,7 @@

@@ -69,11 +69,11 @@ :label="item" :value="item" :style="{ - height: item + 'px', - lineHeight: item + 'px', + // height: item + 'px', + // lineHeight: item + 'px', }" > - {{ + {{ item }} @@ -122,7 +122,7 @@

@@ -157,7 +157,7 @@

@@ -167,11 +167,12 @@ :label="item" :value="item" :style="{ - height: item + 'px', - lineHeight: item + 'px', + // height: item + 'px', + // lineHeight: item + 'px', }" > - {{ + + {{ item }} @@ -1905,7 +1906,7 @@ onMounted(async () => { position: absolute; top: 50px; left: 225px; - width: 700px; + width: 660px; // height: 50px; background-color: #e9ecf1; border-radius: 20px; @@ -1918,7 +1919,7 @@ onMounted(async () => { .tab4Item { display: flex; justify-content: space-between; - width: 130px; + width: 120px; background-color: rgba(71, 105, 218, 0.1); text-align: center; padding: 10px; @@ -1928,6 +1929,7 @@ onMounted(async () => { // margin-bottom: 10px; p { padding-bottom: 5px; + font-size: 16px; } } .SubtitlesSwitch { @@ -1987,7 +1989,7 @@ onMounted(async () => { position: absolute; top: 150px; left: 150px; - width: 150px; + width: 130px; // height: 50px; background-color: #e9ecf1; border-radius: 20px; @@ -2000,7 +2002,7 @@ onMounted(async () => { .tab4Item { display: flex; justify-content: space-between; - width: 130px; + width: 120px; background-color: rgba(71, 105, 218, 0.1); text-align: center; padding: 10px; @@ -2010,6 +2012,7 @@ onMounted(async () => { margin-bottom: 10px; p { padding-bottom: 5px; + font-size:16px; } } .SubtitlesSwitch {