Quellcode durchsuchen

字幕联调初版

dev
congzc vor 1 Jahr
Ursprung
Commit
21a5bdbce4
2 geänderte Dateien mit 77 neuen und 56 gelöschten Zeilen
  1. +72
    -52
      src/views/createVideo/index.vue
  2. +5
    -4
      src/views/myCreating/index.vue

+ 72
- 52
src/views/createVideo/index.vue Datei anzeigen

@@ -1,9 +1,11 @@
<template>
<div class="page flex justify-around">
<!-- 原始图片大小,用于处理字幕比例 -->
<img ref="ImgBoxReal" class="ImgBoxReal" v-if="imgUrl" :src="imgUrl" alt="">
<!-- 左侧栏 -->
<div class="left ">
<!-- 顶部 -->
<!-- 选中AiFace -->
<!-- 选中AiFace -->
<div class="left-top" v-show="showUploadBtn == 1" >
<el-row class="justify-between">
<!-- title框 v-show="!submitImgBtn"-->
@@ -1459,18 +1461,19 @@ async function uploadProgress(videoId, isSaveVideo) {
voiceMouldId: sound.value, //选择声音id voiceFrom=1 时必传
voiceMaterialId: afterSaveAudioId.value, //上传音频且保存音频后得到的id voiceFrom=2 时必传
subtitleEnabled:SubtitlesSwitch.value?1:0 , //字幕开关
subtitleParams:{
subtitleParams:JSON.stringify({
Fontname:SubtitlesFontFamily.value, //字体名字
Fontsize:SubtitlesSize.value, //字体大小
Fontsize:SubtitlesSize.value * proportion.value, //字体大小
// Boxwidth:SubtitlesWidth.value, //字幕宽
// Boxheight:Number(SubtitlesSize.value+10), //字幕高
// Boxheight:SubtitlesBox.value.style.height,
// Marginl:SubtitlesLeft.value, //左边距
Marginv:SubtitlesTop.value, //上边距
SecondaryColour:rgbaToBgra(SubtitlesColor.value), //字色
Marginv:SubtitlesTop.value * proportion.value, //上边距
// SecondaryColour:rgbaToBgra(SubtitlesColor.value), //字色
PrimaryColour:rgbaToBgra(SubtitlesColor.value), //字色
// OutlineColour:rgbaToBgra(SubtitlesBgc.value), //背景色
Aignment:6
}
Alignment:6
})
};
try {
const res3 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据
@@ -1546,15 +1549,15 @@ async function saveOrUpdate(index, isSaveVideo) {
subtitleEnabled:SubtitlesSwitch.value?1:0 , //字幕开关
subtitleParams:JSON.stringify({
Fontname:SubtitlesFontFamily.value, //字体名字
Fontsize:SubtitlesSize.value, //字体大小
Fontsize:SubtitlesSize.value * proportion.value, //字体大小
// Boxwidth:SubtitlesWidth.value, //字幕宽
// Boxheight:Number(SubtitlesSize.value+10), //字幕高
// Boxheight:SubtitlesBox.value.style.height,
// Marginl:SubtitlesLeft.value, //左边距
Marginv:SubtitlesTop.value, //上边距
SecondaryColour:rgbaToBgra(SubtitlesColor.value), //字色
Marginv:SubtitlesTop.value * proportion.value, //上边距
PrimaryColour:rgbaToBgra(SubtitlesColor.value), //字色
// OutlineColour:rgbaToBgra(SubtitlesBgc.value), //背景色
Aignment:6
Alignment:6
})
};
if (index == 1) {
@@ -1795,13 +1798,13 @@ async function findById(findId) {
const subtitleParamsToObj=JSON.parse(res.data.subtitleParams)
console.log(subtitleParamsToObj);
SubtitlesFontFamily.value=subtitleParamsToObj.Fontname
SubtitlesSize.value=subtitleParamsToObj.Fontsize
SubtitlesSize.value=subtitleParamsToObj.Fontsize /proportion.value
// SubtitlesWidth.value=subtitleParamsToObj.Boxwidth
// SubtitlesSize.value=Number(subtitleParamsToObj.Boxheight-10)
// Boxheight:SubtitlesBox.value.style.height,
// SubtitlesLeft.value=subtitleParamsToObj.Marginl
SubtitlesTop.value=subtitleParamsToObj.Marginv
SubtitlesColor.value=BgraToRgba(subtitleParamsToObj.SecondaryColour
SubtitlesTop.value=subtitleParamsToObj.Marginv/proportion.value
SubtitlesColor.value=BgraToRgba(subtitleParamsToObj.PrimaryColour
)
// SubtitlesBgc.value=BgraToRgba(subtitleParamsToObj.OutlineColour
// )
@@ -2077,48 +2080,53 @@ function copyAnswerContent() {
//#region 字幕部分
const canvasImgBox = ref(null); // 图片外盒子dom
const ImgBox = ref(null); // 图片渲染dom
const SubtitlesBox = ref(null); // 字幕盒子dom
const SubtitlesSwitch = ref(false); // 字幕开关
const SubtitlesWidth = ref(250); // 字幕宽度
const SubtitlesFontFamily = ref(""); //字幕字体系列
const SubtitlesTop = ref(400); // 字幕Y轴
const SubtitlesLeft = ref(100); // 字幕X轴
const SubtitlesRow = ref(false); // 字幕单双行
const SubtitlesSize = ref(18); // 字幕字号
const isRotating = ref(false); //控制是否旋转
const rotationStartAngle = ref(0); //旋转中间件
const SubtitlesAngle = ref(20); //旋转度数
const imgWitdt=ref(0); //图片宽度
const imgHeight=ref(0); //图片高度
const SubtitlesColor = ref('#ff0000'); // 字幕字色
// const SubtitlesColorBGRA = ref(rgbaToBgra(SubtitlesColor.value)); // 字幕字色
const SubtitlesBgc = ref('rgba(0,0,0,0)'); // 字幕背景色
// const SubtitlesBgcBGRA = ref(rgbaToBgra(SubtitlesBgc.value)); // 字幕背景色
const ImgBoxReal = ref(null); // 原始图片,用于处理字幕比例
const proportion=ref(1);// 图片缩放比例
const SubtitlesBox = ref(null); // 字幕盒子dom
const SubtitlesSwitch = ref(false); // 字幕开关
const SubtitlesWidth = ref(250); // 字幕宽度
const SubtitlesFontFamily = ref("仿宋"); //字幕字体系列
const SubtitlesTop = ref(400); // 字幕Y轴
const SubtitlesLeft = ref(100); // 字幕X轴
const SubtitlesRow = ref(false); // 字幕单双行
const SubtitlesSize = ref(18); // 字幕字号
const isRotating = ref(false); //控制是否旋转
const rotationStartAngle = ref(0); //旋转中间件
const SubtitlesAngle = ref(20); //旋转度数
const imgWitdt=ref(0); //图片宽度
const imgHeight=ref(0); //图片高度
const SubtitlesColor = ref('#ff0000'); // 字幕字色
// const SubtitlesColorBGRA = ref(rgbaToBgra(SubtitlesColor.value)); // 字幕字色
const SubtitlesBgc = ref('rgba(0,0,0,0)'); // 字幕背景色
// const SubtitlesBgcBGRA = ref(rgbaToBgra(SubtitlesBgc.value)); // 字幕背景色
// 调色板
const colorList = [
'#ff0000', // 红色
'#00ff00', // 绿色
'#0000ff', // 蓝色
'#ffff00', // 黄色
'#000000', // 黑色
'#00ffff', // 青色
'#800000', // 深红色
'#008000', // 深绿色
'#000080', // 深蓝色
'#ffffff', // 白色
'#800080', // 深品红色
'#008080', // 深青色
'#ff8000', // 橙色
'#ff0080', // 粉红色
'#00ff80', // 中绿色
'#80ff00' // 中黄色
'#FFFFFF',
'#8080FF',
'#000000',
'#80FFFF',
'#0000FF',
'#FF8000',
'#00FFFF',
'#80FF00',
'#FF0000',
'#00FF00',
'#008000',
'#FF00FF',
'#0080FF',
'#8000FF',
'#FF0080',
'#FFFF00'
];
const fontFamilyList = [
{label:"黑体",value:"SimHei"},
{label:"新细明体",value:"PMingLiU"}, {label:"楷体",value:"KaiTi"}, { label: 'Montserrat', value: 'Montserrat' },
{ label: 'Open Sans', value: 'Open Sans' },
{ label: 'Roboto', value: 'Roboto' },
{ label: 'Lato', value: 'Lato' }
{label:"仿宋",value:"仿宋"},
{label:"微软雅黑",value:"微软雅黑"}, {label:"新宋体",value:"新宋体"}, { label: '黑体', value: '黑体' },
{ label: '楷体', value: '楷体' },
{ label: '等线', value: '等线' },
{ label: 'Corbel', value: 'Corbel' },
{ label: 'Terminal', value: 'Terminal' },
{ label: 'Times New Roman', value: 'Times New Roman' },
{ label: 'Verdana', value: 'Verdana' }
];
const SubtitlesColorShow = ref(false); // 字色调色板开关
const SubtitlesBgcShow = ref(false); // 背景调色板开关
@@ -2173,6 +2181,7 @@ watch(
imgWitdt.value=ImgBox.value.width
imgHeight.value=ImgBox.value.height
SubtitlesWidth.value=imgWitdt.value*0.7
proportion.value=ImgBoxReal.value.width/ImgBox.value.width
},
{ deep: true }
);
@@ -2394,11 +2403,21 @@ onUnmounted(() => {

<style lang="scss" scoped>
.page {
position: relative;
// height: 1000px;
height: calc(100vh - 80px);
// padding: 20px 0 0 40px;
background-color: #fff;
border-radius: 25px 0 0;
overflow: hidden;
.ImgBoxReal {
position: absolute;
float: left;
top: 0;
left: 0;
opacity: 0;
z-index: -2;
}
}

.left {
@@ -2434,6 +2453,7 @@ onUnmounted(() => {
// height: calc(70vh - 80px );
margin-bottom: 20px;
overflow: hidden;

.editSubtitlesBox{
display: flex;
justify-content: space-evenly;


+ 5
- 4
src/views/myCreating/index.vue Datei anzeigen

@@ -240,7 +240,7 @@
<el-pagination
v-model:current-page="pageNum"
v-model:page-size="pageSize"
:page-sizes="[10, 20, 50, 100, 200]"
:page-sizes="[12, 24, 36]"
:small="false"
:disabled="false"
:background="true"
@@ -274,7 +274,7 @@ const lanChange = ref(locale);

const title = ref("");
const pageNum = ref(1);
const pageSize = ref(10);
const pageSize = ref(12);
const total = ref(0);
// 弹窗显示隐藏
const showDialog = ref(false);
@@ -511,13 +511,14 @@ onMounted(() => {
<style lang="scss" scoped>
.page {
position: relative;
min-height: calc(100vh - 80px);
// min-height: calc(100vh - 80px);
height: calc(100vh - 80px);
padding: 15px 130px;
background-color: #fff;
border-radius: 25px 0 0;
width: 100%;
overflow: hidden;
overflow-y: auto;
.top {
position: relative;
margin-bottom: 35px;


Laden…
Abbrechen
Speichern