Question

我对这个裁剪器遇到了麻烦。似乎没有很好的校准，但我不明白为什么。如果图像不是很大，那就太糟糕了。基本上我采取了图像位置并添加120px的边距。然后我减去m（滑块倍增器）pic的大小函数的余量，并减少裁剪区域最终放大到320 px。但是当它尝试裁剪时它只占左上角。如果有人可以看看并给我反馈，那将是非常好的^^ !!

这是主页

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="./css/step2.css"/>
        <link rel="stylesheet" href="./css/cropper.css"/>
        <title>Etape 2 sur 3</title>
    </head>
    <body>
        <div id="navBar">
            <h4>Étape 2 sur 3</h4>
        </div>
        <div id='avatarBox' class="center-block">

            <h4 class="text-center">Vous pouvez choisir votre photo de profile</h4>
            <div id="imgAvatar" height="320px" widht="320px" class="img-responsive center-block">
                <img id="imgPP" src="./ressources/userProfile.svg" alt="avatar" class="img-thumbnail">           
                <button id="avatarBtn" type="button" class="btn btn-success btn-block"><span class="glyphicon glyphicon-picture" aria-hidden="true">  Ajouter une photo</span></button>
                <input id="avatarInput" type="file" />
                <button id="nextBtn" class="btn btn-primary">Suivant <span class="glyphicon glyphicon-menu-right"></span></button>
            </div>        
        </div>

         <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div  class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Positionnez et redimmensionnez</h4>
                    </div>
                    <div class="modal-body" role="document">

                        <div class="center-block" id="crop"></div>
                        <div id="dragImg" class="center-block">
                            <img id="imgCrop" height="320"  src="" alt="PictureToCrop">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <span style="left:-490px;font-size: 20pt" class="glyphicon glyphicon-zoom-out"></span><span style="left:-50px;font-size: 20pt" class="glyphicon glyphicon-zoom-in"></span> <div class="center" id="slider"></div>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
                        <button id="btnCrop" type="button" class="btn btn-primary">Valider</button>
                    </div>
                </div>
            </div>
        </div> 

         <canvas width="320" height="320"  id="canvasCrop">
                             Your browser does not support the HTML5 canvas tag.
                        </canvas>
        <script>
            document.querySelector('#avatarBtn').addEventListener('click', function (e) {
                // Use the native click() of the file input.
                document.querySelector('#avatarInput').click();
            }, false);
        </script>




        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

        <script src="./scripts/filePreview.js">

        </script>

        <script src="./scripts/crop.js"></script>
        <script src="./scripts/Step2Observer.js"></script>
    </body>
</html>

和CSS

#navBar{
    background-color: #7CC0FC;
    color: #fff;
    position: absolute;
    height: 70px;
    width: 100%;
}
#navBar h4{
    position: absolute;
    margin-left: 10px;
    margin-top: 25px;
    font-size: 20pt;  
}
#avatarBox{
    border-style: solid;
    border-width: 1.5px;
    border-radius: 5px;
    border-color: #BEBEC5;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    top: 150px;
    width: 70%;
    height: 300px;
}
#imgAvatar{
  height: 180px;
   width: 180px;
}
#avatarInput{
    position: relative;
    font-size: 120%;
    top: -24px;
    left: 50px;
    height: 100%;
    font-size: 15pt;
    //custumisation
    visibility: hidden;
    width: 0;
    height: 0;
}
#avatarBtn{
    position: relative;
    top: 3px;
    z-index: 1;
}
#nextBtn{
    position: absolute;
    right: 0%;
    top: 102%;
}

和JS

               var cropToBase64 = function(){
                //Croppper vars
                var posLeft = $("#dragImg").position().left;
                var posTop = $("#dragImg").position().top;
                var m = $("#slider").slider( "option", "value" );

                //Croppping
                var cropX  = (posLeft<0) ? (Math.abs(posLeft) + 120)/m  : (120 - posLeft)/m;
                var cropY = (posTop<0) ?  (Math.abs(posTop) + 15)/m : (15 - posTop)/m ;
                var c = document.getElementById("canvasCrop");
                var ctx = c.getContext("2d");
                var img = document.getElementById("imgCrop");

                ctx.drawImage(img,cropX,cropY,320/m,320/m,0,0,320,320);

               // return c.toDataURL();     
   };

Cropper与帆布drawImage

0 个答案: