Using jCrop With Responsive Design/Fluid Width CSS

Question

I'm having trouble using Jcrop on responsive width images for the mobile version of a site.

When I apply a width setting of 100% to the uploaded image - to allow a user on a mobile device the best option of providing a successful crop, the outputted crop is not the crop area chosen.

This is due, I think, to jcrop working from the size of the true image, not the resized version (100% width), but I don't know how to fix it.

I have seen this question (and answer)but I don't understand how to apply to my Jcrop function:

$(function(){
    $('#target').Jcrop({
            aspectRatio: 4/3,
            bgColor:     '#000',
            bgOpacity:   .4,
            onSelect: updateCoords
        });
        });
        function updateCoords(c)
        {
            $('#x').val(c.x);
            $('#y').val(c.y);
            $('#w').val(c.w);
            $('#h').val(c.h);
        };
        function checkCoords()
        {
            if (parseInt($('#w').val())) return true;
            alert('Please select a crop region then press submit.');
            return false;
        };

This works beautifully if I don't apply any size CSS to the uploaded image, but as soon as I start trying to manage the images size for display, the cropped image is skewed.

I thought Google would have thrown up more results on this as i would expect it to be a common problem - or maybe I'm just too dim to see the obvious.

I hope someone can help.

Answer 1

try adding the following to your Jcrop call:

trueSize: [oImage.naturalWidth,oImage.naturalHeight],

Answer 2

You can fix this by adding the following style to your CSS:

.jcrop-holder img { max-width: none;} /* fix responsive issue*/

Answer 3

I ran into the same proplem once, I solved it by sending the currenct image width (the 100% in pixels) and the original image width to the server. From there you can calculate everything you need.

Answer 4

<code>
var jcrop_api = [];
$(document).ready(function(){
    if($('.slides-thumbs .slide-img').length > 0)
    {   
        $('.slides-thumbs .slide .slide-img').Jcrop({},function(){
            jcrop_api.push(this);
        });
    }
});

$(window).resize(function(){
    if(jcrop_api.length > 0)
    {
    /* this part remove jcrop totally and recreate with new your image with(you need set it by static or set width 100%, just remove attr style with all jcrop styles) */
        $.each( jcrop_api, function( key, api ) {
            api.destroy();
        });
        $('.slides-thumbs .slide .slide-img').removeAttr('style');
        $('.slides-thumbs .slide .jcrop-holder').remove();

        $('.slides-thumbs .slide .slide-img').each(function(){
            // reinit jcrop
            $.Jcrop(this);
        });
    }
});
</code>

Hope it's help someone with jcrop i using jcarousel and have a few images, and need to have jcrop to all of them so i just push all of inits in array,then in resizing i destroy jcrop and his holders, remove style(for css resize image by %) and then reinit it!