Add new option: maxSize

[keicheng]

I added a new option: maxSize. If user chose a large picture on mobile , croppie is slower while he is zooming picture or rotating it.

[thedustinsmith]

Hey thanks for the PR, I know you submitted this awhile ago, but I haven't gotten the chance to maintain croppie as of late. I'll try to get this one into master when I get a chance. Thanks again.

[thedustinsmith]

Again, I know this is old and it's all my fault. The thing that's holding me up on this is the fact that if this gets merged in, you have to pass in a maxsize if you want an image to be cropped larger than 1024x768.

I'd prefer these values be optional rather than required & pre-filled. Since this is 4+ months old I'd understand if you don't want to make these changes. So I may just be making these notes for myself, but so-be-it.

[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 : `

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?", 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é !!!"); });

});

`

Thanks for helping me !!