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