aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2023-10-27

Browse Source 
上传模特截取模特图片大小功能
This commit is contained in:
X1627315083
2023-10-27 11:09:32 +08:00
parent bd9dabd21d
commit 9fc8b925ce
25 changed files with 717 additions and 868 deletions
Download Patch File Download Diff File Expand all files Collapse all files

271
src/component/LibraryPage/ModelPlacement.vue
View File

@@ -91,12 +91,42 @@
<div class="perview_mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div>
<div class="img_content_block" ref="imgbox" @mousemove="startMove($event)">
<img class="placement_img" :src="perviewUrl || printObject?.url">
<div :class="['ponit_click',isRemoveStatus?'remove_point_click':'']" v-show="!perviewUrl" v-for="(item,index) in locationList" :key="item" :style="{left:item.left+'px', top:item.top+'px',borderColor:item.color}" @mousedown="getMouseDown($event,item,index)" @mousemove="startMove($event)">
<div class="placement_add_point_content" :style="{background:item.color}" v-show="!isRemoveStatus"></div>
<div class="icon iconfont icon-guanbi" v-show="isRemoveStatus"></div>
</div>
<div class="img_content_block" ref="imgbox">
<div :style="{width: imgBox.width+'px', height:imgBox.height +'px',top:imgBox.y+'px',left:imgBox.x+'px',position:'absolute'}">
<div :class="['ponit_click',isRemoveStatus?'remove_point_click':'']" v-show="!perviewUrl" v-for="(item,index) in locationList" :key="item" :style="{left:item.left+'px', top:item.top+'px',borderColor:item.color}" @mousedown="getMouseDown($event,item,index)" @mousemove="startMove($event)">
<div class="placement_add_point_content" :style="{background:item.color}" v-show="!isRemoveStatus"></div>
<div class="icon iconfont icon-guanbi" v-show="isRemoveStatus"></div>
</div>
</div>
<vue-cropper
ref="cropper"
:img="option.img"
:outputSize="option.outputSize"
:outputType="option.outputType"
:info="option.info"
:canScale="option.canScale"
:autoCrop="option.autoCrop"
:fixed="option.fixed"
:fixedNumber="option.fixedNumber"
:full="option.full"
:fixedBox="option.fixedBox"
:canMove="option.canMove"
:canMoveBox="option.canMoveBox"
:original="option.original"
:centerBox="option.centerBox"
:height="option.height"
:infoTrue="option.infoTrue"
:limitMinSize="option.limitMinSize"
:enlarge="option.enlarge"
@real-time="realTime"
:autoCropArea="1"
:autoCropHeight="option.autoCropHeight"
:autoCropWidth="option.autoCropWidth"
:mode="option.mode">
</vue-cropper>
<!-- <img class="placement_img" :src="perviewUrl || printObject?.url"> -->
</div>
</div>
@@ -109,12 +139,17 @@
<script lang="ts">
import { defineComponent,ref,createVNode} from 'vue'
import { Https } from "@/tool/https";
import {dataURLtoFile} from "@/tool/util"
import {dataURLtoFile,base64toFile} from "@/tool/util"
import { getCookie } from "@/tool/cookie";
import 'vue-cropper/dist/index.css'
import { VueCropper } from "vue-cropper";
import { useStore } from "vuex";
import { Modal,message } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
export default defineComponent({
components:{
VueCropper,
},
setup() {
const store = useStore()
let oldLocationList:any = ref([])
@@ -129,6 +164,7 @@ export default defineComponent({
let manager:any = ref(false)
let userInfo:any = ref()
let cropperTime:any = ref()
return {
store,
oldLocationList,
@@ -141,7 +177,9 @@ export default defineComponent({
pointList,
isSubmit,
manager,
userInfo
userInfo,
cropperTime
}
},
data(){
@@ -158,7 +196,31 @@ export default defineComponent({
sex:'Male',
sexList: [
]
],
option:{
img: '', //裁剪图片的地址
outputSize: 1, //裁剪生成图片的质量(可选0.1 - 1)
outputType: 'png', //裁剪生成图片的格式（jpeg || png || webp）
info: false, //图片大小信息
canScale: true, //图片是否允许滚轮缩放
autoCrop: true, //是否默认生成截图框
autoCropWidth: '0', //默认生成截图框宽度
autoCropHeight: '0', //默认生成截图框高度
fixed: true, //是否开启截图框宽高固定比例
fixedBox: false, //固定截图框大小，不允许改变
fixedNumber: [1, 2.125], //截图框的宽高比例
full: false, //false按原比例裁切图片，不失真
canMove: true, //上传图片是否可以移动
canMoveBox: true, //截图框能否拖动
original: false, //上传图片按照原始比例渲染
centerBox: false, //截图框是否被限制在图片里面
height: true, //是否按照设备的dpr 输出等比例图片
infoTrue: true, //true为展示真实输出图片宽高，false展示看到的截图框宽高
maxImgSize:'2000', //限制图片最大宽度和高度
enlarge: 7, //图片根据截图框输出比例倍数
mode: 'auto 90%', //图片默认渲染方式
limitMinSize:'100%'
},
}
},
mounted(){
@@ -166,29 +228,87 @@ export default defineComponent({
this.userInfo = JSON.parse(userInfo);
this.getSex()
},
watch: {
sex:{
handler(newVal:any,oldVal:any){
let imgbox:any = this.$refs.imgbox
let imgBoxSizeBG = imgbox?.getElementsByClassName('cropper-view-box-BG')?.[0]
if(imgBoxSizeBG){
if(newVal == 'Male'){
imgBoxSizeBG.style.background = `url(./image/maleBG.png) no-repeat 0 0 / 100% 100%`
}else{
imgBoxSizeBG.style.background = `url(./image/femaleBG.png) no-repeat 0 0 / 100% 100%`
}
}
},
},
},
methods:{
formatter(value:number){
return `${value}%`;
},
showPlacementModal(data:any){
this.placementShow = true
this.printObject = {
...data
}
this.option.img = this.printObject.url
setTimeout(()=>{
let imgbox:any = this.$refs.imgbox
let position = imgbox.getBoundingClientRect()
this.imgBox = {
width:imgbox.clientWidth,
height:imgbox.scrollHeight,
left : position.left,
top:position.top,
scrollTop:imgbox.scrollTop || 0,
}
this.getDefaultPointList(this.imgBox)
},500)
let imgbox:any = this.$refs.imgbox
let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
let imgBoxSizeBG = imgbox.getElementsByClassName('cropper-view-box')[0]
let div:any = document.createElement('div');
if(imgbox.getElementsByClassName('cropper-view-box-BG').length >= 1){
}else{
div.classList.add('cropper-view-box-BG')
div.style.background = `url(./image/femaleBG.png) no-repeat 0 0 / 100% 100%`
div.style.width = '100%'
div.style.height = '100%'
div.style.position = `absolute`
div.style.top = `0`
imgBoxSizeBG.appendChild(div)
}
// imgBoxSize.style.backgroundImage = 'url('+require('@assets/images/library/lemaleBG.png')')'
let cropper:any = this.$refs.cropper
cropper.cropH = cropper.scale*cropper.trueHeight
cropper.cropW = cropper.cropH/2.125
cropper.cropOffsertX = cropper.getImgAxis().x1
cropper.cropOffsertY = cropper.getImgAxis().y1
imgBoxSize.addEventListener('mousemove',this.startMove)
this.setImageSize()
this.getDefaultPointList(this.imgBox)
},300)
},
realTime(data:any) {
clearTimeout(this.cropperTime)
this.cropperTime = setTimeout(()=>{
this.setImageSize()
},1000)
},
setImageSize(){
let imgbox:any = this.$refs.imgbox
let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
let position = imgBoxSize.getBoundingClientRect()
let position1 = imgbox.getBoundingClientRect()
let cropper:any = this.$refs.cropper
console.log(position1,position);
this.imgBox = {
width:cropper.cropW,
height:cropper.cropH,
left : position1.left,
top:position1.top,
scrollTop:imgBoxSize.scrollTop || 0,
x:cropper.getCropAxis().x1,
y:cropper.getCropAxis().y1,
}
},
getSex(){
Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'Sex'}}).then((rv: any) => {
if (rv) {
@@ -205,10 +325,14 @@ export default defineComponent({
}
})
},
//截屏框移动
setMove(){
},
//初始化可以使用的点位
getDefaultPointList(imgBox:any){
this.isSubmit = false
this.locationList=[]
this.pointList = [
{
title:'SHOULDER',
@@ -225,6 +349,10 @@ export default defineComponent({
]
if(this.printObject.templateId){//编辑
this.isSubmit = true
this.option.canScale = false
this.option.fixedBox = true
this.option.canMove = false
this.option.canMoveBox = false
for(let ponit of this.pointList){
for(let pointItem of ponit.pointList){
if(this.printObject[pointItem.type]?.length){
@@ -241,8 +369,12 @@ export default defineComponent({
}
}
this.oldLocationList = JSON.parse(JSON.stringify(this.locationList))
}
}else{
this.option.canScale = true
this.option.fixedBox = false
this.option.canMove = true
this.option.canMoveBox = true
}
this.oldPointList = JSON.parse(JSON.stringify(this.pointList))
},
@@ -266,7 +398,8 @@ export default defineComponent({
return
}
let imgbox:any = this.$refs.imgbox
let scrollTop = imgbox.scrollTop;
let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
let scrollTop = imgBoxSize.scrollTop;
if(this.intObj){
this.currentSign.left = event.clientX - this.imgBox.left
this.currentSign.top = event.clientY + scrollTop - this.imgBox.top
@@ -277,12 +410,14 @@ export default defineComponent({
this.intObj.show = false
this.intObj = null
}else{
//鼠标移动
if(this.startDian){
this.currentSign.left = event.clientX - this.imgBox.left - this.moveOriginal.posX
this.currentSign.top = event.clientY + scrollTop - this.imgBox.top -this.moveOriginal.posY
this.currentSign.left = event.clientX - this.imgBox.left - this.imgBox.x - this.moveOriginal.posX -12
this.currentSign.top = event.clientY + scrollTop - this.imgBox.top - this.imgBox.y -this.moveOriginal.posY -12
document.addEventListener('mouseup', this.getMouseOver);
this.$forceUpdate()
this.setBoundarySign()
}
}
},
@@ -292,24 +427,29 @@ export default defineComponent({
// 在边界上的签名域处理
setBoundarySign() {
let imgbox:any = this.$refs.imgbox
let height = imgbox.offsetHeight + imgbox.scrollTop;
let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
let top = (this.$refs.cropper as any).getCropAxis().y1
let left = (this.$refs.cropper as any).getCropAxis().x1
let height = imgBoxSize.offsetHeight;
// let height = imgBoxSize.offsetHeight + imgBoxSize.scrollTop;
// 2 为签名域的边框
let maxPosHeight = height - 24
let maxPosWidth = imgbox.clientWidth - 24 //+ this.signBox.paddLeft;
if (this.currentSign.top <= 0) {
let maxPosWidth = imgBoxSize.clientWidth - 24 //+ this.signBox.paddLeft;
if (this.currentSign.top+top <= 0) {
this.currentSign.top = 0
} else if (this.currentSign.top >= maxPosHeight ) {
this.currentSign.top = maxPosHeight;
} else if (this.currentSign.top >= maxPosHeight+top ) {
this.currentSign.top = maxPosHeight+top;
}
if (this.currentSign.left <= 0) {
if (this.currentSign.left+left <= 0) {
this.currentSign.left = 0
} else if (this.currentSign.left >= maxPosWidth) {
this.currentSign.left = maxPosWidth;
} else if (this.currentSign.left >= maxPosWidth+left) {
this.currentSign.left = maxPosWidth+left;
}
},
getMouseDown(event:any,item:any,index:number){
if(this.isRemoveStatus){
//删除
for(let itemPoint of this.pointList){
for(let point of itemPoint.pointList){
if(item.type == point.type){
@@ -322,14 +462,19 @@ export default defineComponent({
}else{
this.currentSign = item
// 计算出鼠标在签名域上的偏移
this.moveOriginal.posX = event.offsetX
this.moveOriginal.posY = event.offsetY // 1为边框
// this.moveOriginal.posX = event.offsetX
// this.moveOriginal.posY = event.offsetY // 1为边框
this.moveOriginal.posX = 0
this.moveOriginal.posY = 0 // 1为边框
console.log(this.moveOriginal);
this.startDian = true
}
},
getMouseOver(){
getMouseOver(){//鼠标抬起
this.startDian = false
this.currentSign = {}
document.removeEventListener('mouseup', this.getMouseOver);
@@ -374,19 +519,37 @@ export default defineComponent({
},
submitPlacement(){
if(this.printObject.templateId){
this.printObject.id = this.printObject.libraryId
this.confrimSubmit()
}else{
this.customRequest().then((rv:any)=>{
this.isShowMark = false
this.printObject.id = rv.id
this.confrimSubmit()
}).catch((res:any)=>{
this.isShowMark = false
})
}
// let cropper:any = this.$refs.cropper,
// that = this
// cropper.getCropData((data:any) => {
// // 转换为File对象
// let file = base64toFile(data,this.cropperFileData.name);
// this.$emit('handleCropperSuccess',{file:file, fileData:this.cropperFileData})
// })
let cropper:any = this.$refs.cropper,
that = this
cropper.getCropData(async (value:any) => {
// 转换为File对象
if(this.printObject.templateId){
this.printObject.id = this.printObject.libraryId
this.confrimSubmit()
}else{
let file:any = base64toFile(value,this.printObject.file.name);
// console.log(file,this.printObject,'-=-=--==-');
file.uid = this.printObject.file.uid
this.printObject.file = file
this.customRequest().then((rv:any)=>{
this.isShowMark = false
this.printObject.id = rv.id
this.confrimSubmit()
}).catch((res:any)=>{
this.isShowMark = false
})
}
})
},
confrimSubmit(){
@@ -401,6 +564,7 @@ export default defineComponent({
if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
param.modelType = this.modelType
}
this.isShowMark = true
Https.axiosPost(Https.httpUrls.saveOrEditTemplatePoint, param).then(
(rv: any) => {
@@ -469,7 +633,6 @@ export default defineComponent({
}
});
})
},
getPrintLocation(){
let {width , height} = this.imgBox
@@ -773,7 +936,7 @@ export default defineComponent({
user-select:none;
-moz-user-select:none;
position: relative;
height: 57.6rem;
.img_content_block{
width: 40.8rem;
height: 100%;
@@ -819,7 +982,7 @@ export default defineComponent({
-o-user-select:none; /* Opera私有属性 */
user-select:none; /* CSS3属性 */
cursor: pointer;
z-index: 22;
&.remove_point_click{
border-color: transparent;
background: #EF3C3C;