chutingting 1 anno fa
parent
commit
e3819ec876
2 ha cambiato i file con 53 aggiunte e 27 eliminazioni
  1. +36
    -13
      src/components/cutImg.vue
  2. +17
    -14
      src/views/createVideo/index.vue

+ 36
- 13
src/components/cutImg.vue Vedi File

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


+ 17
- 14
src/views/createVideo/index.vue Vedi File

@@ -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 {


Caricamento…
Annulla
Salva