@@ -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); | |||
@@ -24,7 +24,7 @@ | |||
</p> | |||
<el-select | |||
v-model="Subtitles.SubtitlesFontFamily" | |||
style="width: 100px" | |||
style="width: 70px" | |||
placeholder=" " | |||
size="default" | |||
> | |||
@@ -59,7 +59,7 @@ | |||
</p> | |||
<el-select | |||
v-model="Subtitles.SubtitlesSize" | |||
style="width: 100px" | |||
style="width: 70px" | |||
placeholder=" " | |||
size="default" | |||
> | |||
@@ -69,11 +69,11 @@ | |||
:label="item" | |||
:value="item" | |||
:style="{ | |||
height: item + 'px', | |||
lineHeight: item + 'px', | |||
// height: item + 'px', | |||
// lineHeight: item + 'px', | |||
}" | |||
> | |||
<span :style="{ fontSize: item + 'px', padding: '5px' }">{{ | |||
<span :style="{ padding: '5px' }">{{ | |||
item | |||
}}</span> | |||
</el-option> | |||
@@ -122,7 +122,7 @@ | |||
</p> | |||
<el-select | |||
v-model="Subtitles.SubtitlesFontFamily" | |||
style="width: 100px" | |||
style="width: 70px" | |||
placeholder=" " | |||
size="default" | |||
> | |||
@@ -157,7 +157,7 @@ | |||
</p> | |||
<el-select | |||
v-model="Subtitles.SubtitlesSize" | |||
style="width: 100px" | |||
style="width: 70px" | |||
placeholder=" " | |||
size="default" | |||
> | |||
@@ -167,11 +167,12 @@ | |||
:label="item" | |||
:value="item" | |||
:style="{ | |||
height: item + 'px', | |||
lineHeight: item + 'px', | |||
// height: item + 'px', | |||
// lineHeight: item + 'px', | |||
}" | |||
> | |||
<span :style="{ fontSize: item + 'px', padding: '5px' }">{{ | |||
<!-- fontSize: item + 'px', --> | |||
<span :style="{ padding: '5px' }">{{ | |||
item | |||
}}</span> | |||
</el-option> | |||
@@ -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 { | |||