| @@ -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); | ||||
| @@ -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> | ||||
| @@ -1905,7 +1906,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 +1919,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 +1929,7 @@ onMounted(async () => { | |||||
| // margin-bottom: 10px; | // margin-bottom: 10px; | ||||
| p { | p { | ||||
| padding-bottom: 5px; | padding-bottom: 5px; | ||||
| font-size: 16px; | |||||
| } | } | ||||
| } | } | ||||
| .SubtitlesSwitch { | .SubtitlesSwitch { | ||||
| @@ -1987,7 +1989,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 +2002,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 +2012,7 @@ onMounted(async () => { | |||||
| margin-bottom: 10px; | margin-bottom: 10px; | ||||
| p { | p { | ||||
| padding-bottom: 5px; | padding-bottom: 5px; | ||||
| font-size:16px; | |||||
| } | } | ||||
| } | } | ||||
| .SubtitlesSwitch { | .SubtitlesSwitch { | ||||