<style lang="less">
@import "./imageCropper.less";
</style>

<template>
    <div class="image-editor">
        <div class="cropper" :style="cropperBoxSize">
            <img id="cropimg" alt="" style="max-width:120px">
        </div>
        <div class="image-editor-con1-btn-con margin-top-10">
            <input type="file" accept="image/png, image/jpeg, image/gif, image/jpg" @change="handleChange1" id="fileinput1" class="fileinput" />
            <label class="filelabel" for="fileinput1" :style="{'width':width + 'px'}">
                <Icon type="image"></Icon>&nbsp;选择图片</label>
        </div>
    </div>
</template>

<script>
import Cropper from "cropperjs";
import "./cropper.min.css";
export default {
    name: "ImageCropper",
    data() {
        return {
            cropper: {},
            option: {
                showCropedImage: false,
                cropedImg: ""
            }
        };
    },
    props:{
        //宽
        width: {
            type: Number,
            default: () => {
                return 120;
            }
        },
        //宽
        height: {
            type: Number,
            default: () => {
                return 160;
            }
        }
    },
    computed: {
        cropperBoxSize() {
            return {
                width: this.width + 'px',
                height: this.height + 'px'
            };
        }
    },
    methods: {
        handleChange1(e) {
            let file = e.target.files[0];
            let reader = new FileReader();
            reader.onload = () => {
                this.cropper.replace(reader.result);
                reader.onload = null;
            };
            reader.readAsDataURL(file);
        },
        handlecrop() {
            if ( !this.cropper.getCroppedCanvas() ){
                return null;
            }
            let file = this.cropper.getCroppedCanvas().toDataURL();
            this.option.cropedImg = file;
            this.option.showCropedImage = true;
            return file;
        },
        clear(){
            this.cropper.clear();
        }
    },
    mounted() {
        let img = document.getElementById("cropimg");
        this.cropper = new Cropper(img, {
            aspectRatio: this.width / this.height, //裁剪框比例 1：1
            dragMode: "move",
            preview: "#preview1",
            minCropBoxWidth: this.width,
            minCropBoxHeight: this.height,
            minContainerWidth:this.width,
            minContainerHeight:this.height,
            restore: false,
            center: false,
            highlight: false,
            cropBoxMovable: false,
            toggleDragModeOnDblclick: false
        });

        /*let img2 = document.getElementById('cropimg2');
        this.cropper2 = new Cropper(img2, {
            dragMode: 'move',
            restore: false,
            center: false,
            highlight: false,
            cropBoxMovable: false,
            toggleDragModeOnDblclick: false
        });
        img2.addEventListener('crop', (e) => {
            this.cropdata2.x = parseInt(e.detail.x);
            this.cropdata2.y = parseInt(e.detail.y);
            this.cropdata2.w = parseInt(e.detail.width);
            this.cropdata2.h = parseInt(e.detail.height);
            this.cropdata2.deg = parseInt(e.detail.rotate);
            this.cropdata2.scaleX = parseInt(e.detail.scaleX);
            this.cropdata2.scaleY = parseInt(e.detail.scaleY);
        });

        let img3 = document.getElementById('cropimg3');
        this.cropper3 = new Cropper(img3, {
            dragMode: 'move',
            preview: '#preview3',
            restore: false,
            center: false,
            highlight: false,
            cropBoxMovable: false,
            toggleDragModeOnDblclick: false
        });*/
    }
};
</script>

<style>
</style>
