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 {