if you use it to send an avatar to the user, the second time you open the cropper, it shows what it looked like the last time it was turned off. The picture, size and position have not changed.
the boss rejected this effect and asked me to change it.
also, there is a page that needs two cropper images to upload. If you open the second interface, you can see what the end of the first interface looks like.
MD wants to cry.

feel that I am not clear, so the above two pictures. The empty one is the first opening without operation, and the other is the second opening without operation.

Thank you here.

(the page that requires two interfaces)

//
(window.onresize = function () {
    var win_height = $(window).height();
    var win_width = $(window).width();
    if (win_width <= 768){
        $(".tailoring-content").css({
            "top": (win_height - $(".tailoring-content").outerHeight())/2,
            "left": 0
        });
    }else{
        $(".tailoring-content").css({
            "top": (win_height - $(".tailoring-content").outerHeight())/2,
            "left": (win_width - $(".tailoring-content").outerWidth())/2
        });
    }
})();





//
$("-sharpreplaceImg").on("click",function () {
    $(".tailoring-container.one").toggle();
});
$("-sharpreplaceImg2").on("click",function () {
    $(".tailoring-container.two").toggle();
});

var isIE = /msie/i.test(navigator.userAgent) && !window.opera; 

//
function selectImg(file) {
    if (!file.files || !file.files[0]){
        return;
    }
    var reader = new FileReader();
    reader.onload = function (evt) {
        var replaceSrc = evt.target.result;
        //cropper
        $("-sharptailoringImg").cropper("replace", replaceSrc,false);//false
        $("-sharptailoringImg2").cropper("replace", replaceSrc,false);//false
    }

    if(file.id == "-sharptailoringImg2"){
    // 
        var fileSize = 0;         
        if (isIE && !file.files) { 
            console.log(2);    
            var filePath = file.value;     
            var fileSystem = new ActiveXObject("Scripting.FileSystemObject");        
            var file = fileSystem.GetFile (filePath);     
            fileSize = file.Size;    
        } else {    
            fileSize = file.files[0].size;     
        }   
        var size = fileSize / 1024;    
        console.log(size);
        if(size>100){  
            layer.msg(",100KB");
            file.value="";
            return
        }else{
            reader.readAsDataURL(file.files[0]);
        }            
    }else{
        reader.readAsDataURL(file.files[0]);
    }


    
}

//cropper

first("-sharptailoringImg",1/1);
first("-sharptailoringImg2",136/181);
function first(tailoringImg,bar){


    $(tailoringImg).cropper({
        aspectRatio: bar,//
        preview: ".previewImg",//
        guides: false,  //()
        autoCropArea: 0.8,  //0-10.8
        movable: false, //
        dragCrop: false,  //
        movable: true,  //
        resizable: true,  //
        zoomable: true,  //
        mouseWheelZoom: true,  //
        touchDragZoom: true,  //
        rotatable: true,  //
        crop: function(e) {
            // 
        }
    });
    //
    $(".cropper-rotate-btn").on("click",function () {
        $(tailoringImg).cropper("rotate", 45);
    });
    //
    $(".cropper-reset-btn").on("click",function () {
        $(tailoringImg).cropper("reset");
    });
    //
    var flagX = true;
    $(".cropper-scaleX-btn").on("click",function () {
        if(flagX){
            $(tailoringImg).cropper("scaleX", -1);
            flagX = false;
        }else{
            $(tailoringImg).cropper("scaleX", 1);
            flagX = true;
        }
        flagX != flagX;
    });

}

var one = ".tailoring-container.one",
    two = ".tailoring-container.two";

//

next("-sharpsureCut","-sharptailoringImg","-sharpfinalImg",one,"[name=portrait]");
next("-sharpsureCut2","-sharptailoringImg2","-sharpfinalImg2",two,"[name=paper]");
function next(sureCut,tailoringImg,finalImg,close,site){
    $(sureCut).on("click",function () {
        if ($(tailoringImg).attr("src") == null ){
            return false;
        }else{
            var cas = $(tailoringImg).cropper("getCroppedCanvas");//canvas
            var base64url = cas.toDataURL("image/png"); //base64
            $(finalImg).prop("src",base64url);//

            //
            closeTailor(close);
            $(site).val(base64url);
        }
    });
}

//
function closeTailor(location) {
    $(location).toggle();
}