<template>
    <div class="imghead">
        <img id="image" />
        <div class="submit-btn" @click="sub">{{lan.$t("baocun") }}</div>
    </div>
</template>
<style lang="scss" scoped>
.imghead {
    padding-top:0.3rem;
    width: 550px;
    // height: 550px;
    // overflow: hidden;
    #image{
        width: 500px;
        height: 500px;
    }
    .submit-btn {
        width: 63px;
        height: 23px;
        background: #08ae98;
        border-radius: 3px;
        font-size: 10px;
        font-weight: 500;
        color: #ffffff;
        text-align: center;
        line-height: 23px;
        cursor: pointer;
        user-select: none;
       
        margin: 20px 0 0 auto;
    }

}
</style>
<script lang="ts">
import { useI18n } from '@/utils/i18n';
import { uploadflie } from '@/utils/vod';
import { defineComponent, onMounted } from "vue";
export default defineComponent({
    props: {
        url: {
            type: File,
        },
    },
    setup(props, ctx) {
        const lan: any = useI18n();
        let CROPPER: any;
        onMounted(() => {
            const reader = new FileReader();
            if (props.url) {
                reader.readAsDataURL(props.url);
                reader.onload = () => {
                    const dataURL = reader.result;
                    //将img的src改为刚上传的文件的转换格式
                    const image: any = document.querySelector("#image");
                    console.log(image)
                    if(image){
                        console.log(110)
                        image.src = dataURL;
                         //创建cropper实例-----------------------------------------
                        CROPPER = new window.Cropper(image, {
                            aspectRatio: 1,
                            viewMode: 1,
                            background: false,
                            zoomable: false
                           
                        });
                            
                    }

                   
                };
            }
        });
        function sub(){
            if(CROPPER){
                CROPPER.getCroppedCanvas({
                    maxWidth: 4096,
                    maxHeight: 4096,
                    fillColor: '#fff',
                    imageSmoothingEnabled: true,
                    imageSmoothingQuality: 'high',
                }).toBlob(async (blob: any) => {
                    //之后就可以愉快的将blob数据发送至后端啦，可根据自己情况进行发送，我这里用的是axios
                    // 第三个参数为文件名，可选填.
                    const file =  new File([blob], 'name.png',{type: "image/png"});
                    const res = await uploadflie(file, (info: any) => {
                            console.log(info);
                    });
                    ctx.emit("upload", res)
                })
            }
        }
        return {
            lan,
            sub
        };
    },
});
</script>