@@ -92,24 +92,47 @@ function myUpload(params) {} | |||||
const cropper = ref(null); | const cropper = ref(null); | ||||
const option = reactive({ | const option = reactive({ | ||||
img: "", | img: "", | ||||
canMove: true, | |||||
outputSize: 0.5, //图片质量 | outputSize: 0.5, //图片质量 | ||||
info: false, // 裁剪框的大小信息 | |||||
// outputType: 'jpeg', // 裁剪生成图片的格式 | |||||
outputType: "png", // 裁剪生成图片的格式 | |||||
outputType: "png", | |||||
canScale: true, // 图片是否允许滚轮缩放 | canScale: true, // 图片是否允许滚轮缩放 | ||||
autoCrop: true, // 是否默认生成截图框 | |||||
fixedBox: false, | |||||
original: false, | |||||
canMoveBox: true, | |||||
autoCrop: true, | |||||
// 只有自动截图开启 宽度高度才生效 | |||||
autoCropWidth: window.innerWidth - 100 + "px", // 默认生成截图框宽度 | autoCropWidth: window.innerWidth - 100 + "px", // 默认生成截图框宽度 | ||||
autoCropHeight: 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 展示看到的截图框宽高 | 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 裁剪图片 | //#region 裁剪图片 | ||||
const cropperOverData = ref(null); | const cropperOverData = ref(null); | ||||
@@ -2,7 +2,6 @@ | |||||
export {} | export {} | ||||
declare global { | declare global { | ||||
const EffectScope: typeof import('vue')['EffectScope'] | const EffectScope: typeof import('vue')['EffectScope'] | ||||
const ElForm: typeof import('element-plus/es')['ElForm'] | |||||
const ElMessage: typeof import('element-plus/es')['ElMessage'] | const ElMessage: typeof import('element-plus/es')['ElMessage'] | ||||
const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] | const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] | ||||
const asyncComputed: typeof import('@vueuse/core')['asyncComputed'] | const asyncComputed: typeof import('@vueuse/core')['asyncComputed'] | ||||
@@ -271,7 +270,6 @@ import { UnwrapRef } from 'vue' | |||||
declare module 'vue' { | declare module 'vue' { | ||||
interface ComponentCustomProperties { | interface ComponentCustomProperties { | ||||
readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']> | 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 ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']> | ||||
readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']> | readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']> | ||||
readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']> | readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']> | ||||
@@ -24,7 +24,7 @@ | |||||
</p> | </p> | ||||
<el-select | <el-select | ||||
v-model="Subtitles.SubtitlesFontFamily" | v-model="Subtitles.SubtitlesFontFamily" | ||||
style="width: 100px" | |||||
style="width: 70px" | |||||
placeholder=" " | placeholder=" " | ||||
size="default" | size="default" | ||||
> | > | ||||
@@ -59,7 +59,7 @@ | |||||
</p> | </p> | ||||
<el-select | <el-select | ||||
v-model="Subtitles.SubtitlesSize" | v-model="Subtitles.SubtitlesSize" | ||||
style="width: 100px" | |||||
style="width: 70px" | |||||
placeholder=" " | placeholder=" " | ||||
size="default" | size="default" | ||||
> | > | ||||
@@ -69,11 +69,11 @@ | |||||
:label="item" | :label="item" | ||||
:value="item" | :value="item" | ||||
:style="{ | :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 | item | ||||
}}</span> | }}</span> | ||||
</el-option> | </el-option> | ||||
@@ -122,7 +122,7 @@ | |||||
</p> | </p> | ||||
<el-select | <el-select | ||||
v-model="Subtitles.SubtitlesFontFamily" | v-model="Subtitles.SubtitlesFontFamily" | ||||
style="width: 100px" | |||||
style="width: 70px" | |||||
placeholder=" " | placeholder=" " | ||||
size="default" | size="default" | ||||
> | > | ||||
@@ -157,7 +157,7 @@ | |||||
</p> | </p> | ||||
<el-select | <el-select | ||||
v-model="Subtitles.SubtitlesSize" | v-model="Subtitles.SubtitlesSize" | ||||
style="width: 100px" | |||||
style="width: 70px" | |||||
placeholder=" " | placeholder=" " | ||||
size="default" | size="default" | ||||
> | > | ||||
@@ -167,11 +167,12 @@ | |||||
:label="item" | :label="item" | ||||
:value="item" | :value="item" | ||||
:style="{ | :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 | item | ||||
}}</span> | }}</span> | ||||
</el-option> | </el-option> | ||||
@@ -1235,7 +1236,12 @@ async function reGetpersonSCIList() { | |||||
const scImgActive = ref(null); | const scImgActive = ref(null); | ||||
function selectScImg(img) { | function selectScImg(img) { | ||||
scImgActive.value = img.id; | 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) { | function delImg(id) { | ||||
@@ -1905,7 +1911,7 @@ onMounted(async () => { | |||||
position: absolute; | position: absolute; | ||||
top: 50px; | top: 50px; | ||||
left: 225px; | left: 225px; | ||||
width: 700px; | |||||
width: 660px; | |||||
// height: 50px; | // height: 50px; | ||||
background-color: #e9ecf1; | background-color: #e9ecf1; | ||||
border-radius: 20px; | border-radius: 20px; | ||||
@@ -1918,7 +1924,7 @@ onMounted(async () => { | |||||
.tab4Item { | .tab4Item { | ||||
display: flex; | display: flex; | ||||
justify-content: space-between; | justify-content: space-between; | ||||
width: 130px; | |||||
width: 120px; | |||||
background-color: rgba(71, 105, 218, 0.1); | background-color: rgba(71, 105, 218, 0.1); | ||||
text-align: center; | text-align: center; | ||||
padding: 10px; | padding: 10px; | ||||
@@ -1928,6 +1934,7 @@ onMounted(async () => { | |||||
// margin-bottom: 10px; | // margin-bottom: 10px; | ||||
p { | p { | ||||
padding-bottom: 5px; | padding-bottom: 5px; | ||||
font-size: 16px; | |||||
} | } | ||||
} | } | ||||
.SubtitlesSwitch { | .SubtitlesSwitch { | ||||
@@ -1987,7 +1994,7 @@ onMounted(async () => { | |||||
position: absolute; | position: absolute; | ||||
top: 150px; | top: 150px; | ||||
left: 150px; | left: 150px; | ||||
width: 150px; | |||||
width: 130px; | |||||
// height: 50px; | // height: 50px; | ||||
background-color: #e9ecf1; | background-color: #e9ecf1; | ||||
border-radius: 20px; | border-radius: 20px; | ||||
@@ -2000,7 +2007,7 @@ onMounted(async () => { | |||||
.tab4Item { | .tab4Item { | ||||
display: flex; | display: flex; | ||||
justify-content: space-between; | justify-content: space-between; | ||||
width: 130px; | |||||
width: 120px; | |||||
background-color: rgba(71, 105, 218, 0.1); | background-color: rgba(71, 105, 218, 0.1); | ||||
text-align: center; | text-align: center; | ||||
padding: 10px; | padding: 10px; | ||||
@@ -2010,6 +2017,7 @@ onMounted(async () => { | |||||
margin-bottom: 10px; | margin-bottom: 10px; | ||||
p { | p { | ||||
padding-bottom: 5px; | padding-bottom: 5px; | ||||
font-size:16px; | |||||
} | } | ||||
} | } | ||||
.SubtitlesSwitch { | .SubtitlesSwitch { | ||||