aida_front/src/component/HomePage/Cropper.vue

<template>
		<div ref="cutPrictureModal">
      <a-modal class="generalModel cut_pricture_modal"
        v-model:visible="cutPicuterModal" 
        :footer="null" 
		:get-container="() => $refs.cutPrictureModal"
        width="75%"
        :maskClosable="false"
        :centered="true"
		:closable="false"
		:keyboard="false"
		:zIndex="999999"
		:mask="false"
    >
		<div class="collection_title">
			<div class="collection_title_text">
				<div>{{ $t('Cropper.Cutpicture') }}</div>
			</div>
			 <div class="header_right_block" @click.stop="">
                <div class="header_cancel_button" @click.stop="cancleCropper()">{{ $t('Cropper.Cancel') }}</div>
            </div>
		</div>
        <div class="collection_modal_body">
            <div class="cut_picture_left">
                <div class="cut_picture_body">
                    <VueCropper
                        ref="cropper"
                        :original="option.original"
                        :img="option.img"
                        :outputSize="option.size"
                        :outputType="option.outputType"
                        :auto-crop="option.autoCrop"
						:fixedBox="!isRound"
						:movable="true"
                        :fixed="isRound"
                        :auto-crop-width="option.autoCropWidth"
                        :auto-crop-height="option.autoCropWidth"
                        :center-box="option.centerBox"
                        :can-move="option.canMove" :can-move-box="option.canMoveBox" 
                        @real-time="realTime"
                    ></VueCropper>
                </div>
                <div class="cur_picture_opterate">
                    <div class="cur_picture_opterate_item" @click="rotateLeft()"><span class="icon iconfont icon-chexiao operate_icon"></span></div>
                    <div class="cur_picture_opterate_item" @click="rotateRight()"><span class="icon iconfont icon-chexiao operate_icon icon_chexiao_sec"></span></div>
                    <div class="cur_picture_opterate_item" @click="changeScale(-.1)"><span class="operate_icon icon_font">-</span></div>
                    <div class="cur_picture_opterate_item" @click="changeScale(.1)"><span class="operate_icon icon_font">+</span></div>
                    <div class="cur_picture_opterate_item" @click="refreshCrop()"><span class="icon iconfont icon-shuaxin operate_icon"></span></div>
                </div>
            </div>
            <div class="cut_picture_right">
                <div class="cur_picture_right_header">
                    <div class="review_logo icon iconfont icon-yulan"></div>
                    <div>{{ $t('Cropper.CropPreview') }}</div>
                </div>
                <div class="cut_picture_review_block" :style="{'width': previews.w + 'px', 'height': previews.h + 'px'}">
                    <div class="cut_picture_review_item">
                        <div class="cut_picture_review_content" :class="{active:isRound}" :style="{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden'}">
                            <div :style="previews.div">
                                <img class="previews_image" :style="previews.img" :src="previews.url">    
                            </div>
                        </div>
                    </div>
                	<div class="next_step_button" @click.stop="finishCropper()">
						<!-- <i class="fi fi-rr-check"></i> -->
						<i class="fi fi-sr-check-circle"></i>
					</div>
                    <!-- <div class="cut_picture_review_item">
                        <div class="cut_picture_review_block_sec" :style="{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden'}">
                                <div :style="previews.div" >
                                <img class="previews_image" :style="previews.img" :src="previews.url">    
                            </div>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>
    </a-modal>
</div>
</template>
<script lang="ts">
import { defineComponent,inject } from 'vue'
import 'vue-cropper/dist/index.css'
import { VueCropper }  from "vue-cropper";
// import { openGuide,driverObj__ } from "@/tool/guide";
import {base64toFile} from '@/tool/util'
export default defineComponent({
    props:['cropperFileData','isUpload','isRound'],
    components:{
        VueCropper,
    },
	setup(){
		
	},
     data(prop){
        return {
            cutPicuterModal:false,
            option: {
                original:false,
                img: '',
                size: 1,
                full: false,
                outputType: 'png',
                autoCrop: true,
                // 只有自动截图开启 宽度高度才生效
                autoCropWidth: prop.isRound?100:360,
                autoCropHeight: prop.isRound?100:360,
                max: 99999,
                centerBox:true,
                canMove:true,
                canMoveBox:true,
				fixedBox:false,
            },
            previews:{},
        }
    },
	mounted(){
	},
    methods:{

        rotateLeft() {
            let cropper:any = this.$refs.cropper
            cropper.rotateLeft();
        },
        rotateRight() {
            let cropper:any = this.$refs.cropper
            cropper.rotateRight();
        },
        refreshCrop() {
            let cropper:any = this.$refs.cropper
            cropper.refresh();
        },
        
        changeScale(num:any) {
            num = num || 1;
            let cropper:any = this.$refs.cropper
            cropper.changeScale(num);
        },
        // 实时预览函数
        realTime(data:any) {
            this.previews = data;
        },

        getOptionImg(img:any){
            this.option.img = img
        },

        changeShowModal(type:any){
            this.cutPicuterModal = type
        },

        finishCropper(){
            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,base64:data})
            })
			
        },

        closeCropper(){
            this.cutPicuterModal = false
            this.option.img = ''
        },

        cancleCropper(){
            this.cutPicuterModal = false
            this.option.img = ''
            this.$emit('closeCropper')
        }

    }
})
</script>
<style lang="less" scoped>
.cut_pricture_modal{
	
	// max-width: 1150px ;
	
	.collection_title{
		position: absolute;
		width: calc(100% - 10rem*1.2);
		top: calc(3rem*1.2);
		display: flex;
		font-size: var(--aida-fsize2);
		font-weight: 900;
		color: rgba(0,0,0,.65);
		align-items: center;
		.collection_title_text{
			margin-right: calc(4rem*1.2);
		}
		.collection_title_text_intro{
			font-size: var(--aida-fsize1-4);
			font-weight: 400;
			color: rgba(0,0,0,.45);
		}
	}
    .header_right_block{
        display: flex;
        align-items: center;
        position: absolute;
        right: calc(2.1rem*1.2);
        height: 100%;

        .next_step_button{
            padding:  0 calc(1.2rem*1.2);
            height: calc(3.2rem*1.2);
            // background: linear-gradient(160deg, #AC2A3B, #292161);
			background: #000;
			color: #fff;
            border-radius: calc(1.6rem*1.2);
            font-size: calc(1.4rem*1.2);
            line-height: calc(3.2rem*1.2);
            margin-right: calc(1.6rem*1.2);
            white-space: nowrap;
            cursor: pointer;
        }

        .header_cancel_button{
            padding:  0 calc(2.1rem*1.2);
            height: calc(3.2rem*1.2);
            background: #E4E5EB;
            border-radius: calc(1.6rem*1.2);
            font-size: calc(1.4rem*1.2);
            color: #030303;
            line-height: calc(3.2rem*1.2);
            white-space: nowrap;
            cursor: pointer;
        }
    }

    .collection_modal_body{
        height: 100%;
        // padding: 1rem 2.5rem 1.4rem 1.4rem;
        box-sizing: border-box;
        // background: #F2F3FB;
        display: flex;
        justify-content: space-between;
		align-items: center;
        .cut_picture_right,.cut_picture_left{
			display: flex;
			flex-direction: column;
			height: 80%;
		}

        .cut_picture_left{
            width: calc(70.7rem*1.2);
            // height: 100%;
            background: #fff;
            border-radius: calc(2rem*1.2);
            padding: calc(1.3rem*1.2) calc(1.3rem*1.2) calc(2rem*1.2);
            box-sizing: border-box;

            .cut_picture_body{
                width: 100%;
                height: calc(40rem*1.2);
                // height: 53rem;
                background: yellow;
            }

            .cur_picture_opterate{
                margin: calc(2.7rem*1.2) auto 0;
                border-radius: calc(1.6rem*1.2);
                display: flex;
                overflow: hidden;
                border: 1px solid #E2E2E4;
                width: calc(24rem*1.2);

                .cur_picture_opterate_item{
                    width: calc(4.7rem*1.2);
                    height: calc(4rem*1.2);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-right: 0.1rem solid #E6E8EA;
                    cursor: pointer;

                    .icon_chexiao_sec{
                        transform: rotateY(180deg);   /* 垂直镜像翻转 */
                    }

                    .operate_icon{
                        font-size: calc(1.8rem*1.2);
                        color: rgba(102, 102, 102, 1);
                        font-weight: bold;
                    }

                    .icon_font{
                        font-size: calc(2.5rem*1.2);
                        position: relative;
                        top: calc(-0.3rem*1.2);
                        user-select:none;
                    }

                    .icon-shuaxin{
                        font-size: calc(1.4rem*1.2);
                    }

                    &:last-child{
                        border: none;
                    }
                }
            }
        }

        .cut_picture_right{
            // width: 39.2rem;
			width: calc(52rem*1.2);
            background: #fff;
            border-radius: calc(2rem*1.2);
			margin-block: -5rem;
            .cur_picture_right_header{
                // padding: calc(2rem*1.2);
				padding: 2rem;
                display: flex;
                align-items: center;
                font-size: var(--aida-fsize1-8);
                font-weight: 400;
                color: #030303;
                line-height: calc(1.8rem*1.2);
                font-weight: bold;

                .review_logo{
                    font-size: calc(1.8rem*1.2);
                    color: #333;
                    margin-right: calc(1rem*1.2);
                }
            }

            .cut_picture_review_block{
                width: 100%;
                height: calc(100% - 6.8rem*1.2);
				margin: 0 auto;
				.next_step_button{
					margin-top: 2rem;
					i{
						display: flex;
						// height: 4rem;
						// width: 4rem;
						// background: #000;
						// color: #fff;
						font-weight: 900;
						border-radius: 50%;
						font-size: 4rem;
						align-items: center;
						justify-content: center;
						margin: 0 auto;
						cursor: pointer;
					}
				}
                .cut_picture_review_item{
                    width: 100%;
                    // height: 50%;
					height: 100%;
                    position: relative;

                    .cut_picture_review_content{
                        transform-origin: 0 0;
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: scale(1) translate(-50%, -50%);
                        background: rgba(91,94,105,0.8);
                        box-shadow: 0 calc(0.2rem*1.2) calc(0.5rem*1.2) 0 rgba(216,213,239,0.3);
                        border-radius: calc(1rem*1.2);
						&.active{
							border-radius: 50%;
							overflow: hidden
						}
                    }

                    .cut_picture_review_block_sec{
                        transform-origin: 0 0;
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: scale(0.45) translate(-50%, -50%);
                        border-radius: 100%;
                        background: rgba(91,94,105,0.8);
                        box-shadow: 0 calc(0.2rem*1.2) calc(0.5rem*1.2) 0 rgba(216,213,239,0.3);
                    }

                }
            }
        }
    }
}
</style>