Bläddra i källkod

Merge branch 'ctt_dev' into dev

dev
chutingting 1 år sedan
förälder
incheckning
bba94a60d3
3 ändrade filer med 59 tillägg och 30 borttagningar
  1. +36
    -13
      src/components/cutImg.vue
  2. +0
    -2
      src/types/auto-imports.d.ts
  3. +23
    -15
      src/views/createVideo/index.vue

+ 36
- 13
src/components/cutImg.vue Visa fil

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


+ 0
- 2
src/types/auto-imports.d.ts Visa fil

@@ -2,7 +2,6 @@
export {}
declare global {
const EffectScope: typeof import('vue')['EffectScope']
const ElForm: typeof import('element-plus/es')['ElForm']
const ElMessage: typeof import('element-plus/es')['ElMessage']
const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
@@ -271,7 +270,6 @@ import { UnwrapRef } from 'vue'
declare module 'vue' {
interface ComponentCustomProperties {
readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
readonly ElForm: UnwrapRef<typeof import('element-plus/es')['ElForm']>
readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']>
readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>


+ 23
- 15
src/views/createVideo/index.vue Visa fil

@@ -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>
@@ -1235,7 +1236,12 @@ async function reGetpersonSCIList() {
const scImgActive = ref(null);
function selectScImg(img) {
scImgActive.value = img.id;
materialList.scList.push({ ...img, x: 0, y: 0, z: 0, w: 1, h: 1 });
let maxValue = 1
// 素材层级从2递增
if (materialList.scList.length > 0) {
maxValue = Math.max.apply(Math, materialList.scList.map(item => item.z));
}
materialList.scList.push({ ...img, x: 0, y: 0, z: maxValue + 1, w: 1, h: 1 });
}
// 删除上传的背景或素材
function delImg(id) {
@@ -1905,7 +1911,7 @@ onMounted(async () => {
position: absolute;
top: 50px;
left: 225px;
width: 700px;
width: 660px;
// height: 50px;
background-color: #e9ecf1;
border-radius: 20px;
@@ -1918,7 +1924,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 +1934,7 @@ onMounted(async () => {
// margin-bottom: 10px;
p {
padding-bottom: 5px;
font-size: 16px;
}
}
.SubtitlesSwitch {
@@ -1987,7 +1994,7 @@ onMounted(async () => {
position: absolute;
top: 150px;
left: 150px;
width: 150px;
width: 130px;
// height: 50px;
background-color: #e9ecf1;
border-radius: 20px;
@@ -2000,7 +2007,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 +2017,7 @@ onMounted(async () => {
margin-bottom: 10px;
p {
padding-bottom: 5px;
font-size:16px;
}
}
.SubtitlesSwitch {


Laddar…
Avbryt
Spara