Question

Since jcrop is now working on touch screens I want to do a web app that uses it. I have everything working on it but if I try to make the design responsive so that the user can see the whole image before cropping (it’s width is a percentage of the screen) then the cropped area won’t be the same as the selected by the user. The coordinates of the selection made on top of the resized image won’t match the ones on the full size image.

Jcrop includes a solution to a similar issue (when handling huge images) by using box sizing or the truesize method but none of them work if the width of the image is based on percentages, instead of a given width in pixels.

The only solution I can think of is to resize the image using media queries and make 3 or 4 versions depending on the width of the screen but I’d rather stick to the percentage based resize because it looks much better.

This is my jcrop call:

      var jcrop_api, boundx, boundy;
    $('#target').Jcrop({
        onChange: updatePreview,
        onSelect: updatePreview,
        aspectRatio: 0.75
    },function(){
        // Use the API to get the real image size
        var bounds = this.getBounds();
        boundx = bounds[0];
        boundy = bounds[1];
        trueSize: [900,600],
        // Store the API in the jcrop_api variable
        jcrop_api = this;
    });
            function updatePreview(c){
        if (parseInt(c.w) > 0){
            var rx = <?echo $width;?> / c.w;
            var ry = <?echo $height;?> / c.h;

            $('#preview').css({
                width: Math.round(rx * boundx) + 'px',
                height: Math.round(ry * boundy) + 'px',
                marginLeft: '-' + Math.round(rx * c.x) + 'px',
                marginTop: '-' + Math.round(ry * c.y) + 'px'
            });
        }

        $('#x').val(c.x);
        $('#y').val(c.y);
        $('#w').val(c.w);
        $('#h').val(c.h);

    };

Answer 1

TrueSize ended up doing the trick, I wasn’t using it properly:

jQuery(function($){

    // Create variables (in this scope) to hold the API and image size
    var jcrop_api, boundx, boundy;

    $('#target').Jcrop({
        onChange: updatePreview,
        onSelect: updatePreview,
        aspectRatio: 0.75,
        trueSize: [<?echo $width2;?>,<?echo $height2;?>]
    },function(){
        // Use the API to get the real image size
        var bounds = this.getBounds();
        boundx = bounds[0];
        boundy = bounds[0.75];
        //trueSize: [ancho,alto],
        // Store the API in the jcrop_api variable
        jcrop_api = this;
    });

    function updatePreview(c){
        if (parseInt(c.w) > 0){
            var rx = <?echo $width;?> / c.w;
            var ry = <?echo $height;?> / c.h;

            $('#preview').css({
                width: Math.round(rx * boundx) + 'px',
                height: Math.round(ry * boundy) + 'px',
                marginLeft: '-' + Math.round(rx * c.x) + 'px',
                marginTop: '-' + Math.round(ry * c.y) + 'px'
            });
        }

        $('#x').val(c.x);
        $('#y').val(c.y);
        $('#w').val(c.w);
        $('#h').val(c.h);

    };


});