default zoom does not show the whole picture

[mokraemer]

This bugfix should prevent an image to be zoomed to maximize one axis.
If the image is too small, for the canvas element, this will show some borders around.
If this was by desire, I suggest having an option to decide which default zoom to use.

[SamirDeveloper]

Hello everyone there !
i have a problem with the croppie tool.
the problem is that the display of the image on croppie is different from one screen to another => croppie takes all the height of the image but width is completely overflowed. I want the image display to be fixed on croppie with all screens, i want that the image will be not overflowed after uploading to croppie, so ha we can fixe that please ?
How can i do it please because i am working with my client now and he is not happy to see that.

Here is my code:

Please anonimyze this picture (if personal data are visible)

My image does not contain personal data I've finished Cropping

And this is Javascript code :
`<script>
// cropping modal treatment
$(document).ready(function(){
$image_crop = $('#image_demo').croppie({
viewport: {
width:560,
height:315,
type:'square'
},
boundary:{
width:960,
height:500
},
showZoomer: false,
enableResize: true,
enableOrientation: true,
result: {
type: 'base64'
}
});

var $files;
var $file;

$('#Document').on('change', function(){

var $addButton = document.getElementById("addButton");

$files = event.target.files;
$file = files[0];
var $ind = $file.name.lastIndexOf(".");
var $ext = $file.name.substring(ind);
$ext = $ext.toLowerCase();
   
if (($ext === ".jpg") || ($ext === ".jpeg") || ($ext === ".png")) {

    $addButton.removeAttribute('disabled');
    var $document = document.getElementById("Document");

    var $reader = new FileReader();
    $reader.onload = function (event) {

        $image_crop.croppie('bind', {
            url: event.target.result

        }).then(function(){

            $image_crop.croppie('setZoom', 0);
        });
    }
    $reader.readAsDataURL(this.$files[0]);

    $('#insertimageModal').modal('show');

}else{

    $addButton.setAttribute('disabled','disabled');
    function Timer(){
        if($count == 2){
            clearTimer($timer);
        }else{
            $count ++;
            var p = document.getElementById("bt");
            var div = document.getElementById("alert");
            p.removeChild(div);
        }
    }
    var $count = 1;
    var $timer = setTimeout(Timer, 3000); 
    console.log("Uncompatible image or it isn't");
    var p = document.getElementById("bt");
    var div = document.createElement("div");
    div.setAttribute("class","alert alert-danger");
    div.setAttribute("role","alert");
    div.setAttribute("id","alert");
    text = document.createTextNode("You can only upload an image (jpeg, png or jpg)");
    div.appendChild(text);
    p.appendChild(div);
    $timer;
}

});

var $value;
var $text;
var $IndexChoisie;
$('#customeTypeSelection').on('change', function(){
$IndexChoisie = document.forms.form.CustomTypeId.options.selectedIndex;
$text = document.forms.form.CustomTypeId.options[$IndexChoisie].text;
$value = document.forms.form.CustomTypeId.options[$IndexChoisie].value;

});
$('.crop_image').click(function(event){
var $textarea = document.getElementById("textarea");
var $customTypeId = document.getElementById("customeTypeSelection").childNodes;

$image_crop.croppie('result', {
  type: 'canvas',
  size: 'original'

}).then(function(response){

  $.ajax({
    url:"patient.php?<?php  echo forwardArg('sid', 'o', 'pid', 'add'); ?>",
    type:'POST',
    data:{
        "image": response,
        "Note": $textarea.value,
        "CustomTypeId": $value,
        "Name": file.name,
        "Type": file.type,
        "size": file.size
    },

    success:function(data){

    $('#insertimageModal').modal('hide');
    alert("Success cropping ! Note added");
    }
  
  })

});

});

$('#addButton').on('click', function(){
console.log("Clicé !!!");
});

});

</script>`

Thanks for helping me !!