Search code examples
javascriptjqueryjcrop

Set aspect ratio of JCrop on button click?


I am using JCrop to allow users to crop images when uploading them.

There are two possible image crop sizes that are allowed, for example 16:10 or 4:3.

I would like to be able to add two input buttons, and have one of them set the aspect ratio as 16:10, and the other 4:3.

This is the code to set the aspect to 16:10 with the page load, Is it possible to have it change to 4:3 on button press?

<script language="Javascript">
    jQuery(function($) {
        $('#crop').Jcrop({
            aspectRatio: 16 / 10
        });
    });
</script>

Solution

  • You can use it like that :

    jQuery(function($) {
        var jcrop_api;
        $('#crop').Jcrop({
            aspectRatio: 16 / 10
        }, function () {
            jcrop_api = this;    
        });
    });
    

    then on the click event :

    jcrop_api.setOptions({ aspectRatio: 4 / 3 });
    jcrop_api.focus();