JCrop resizing the image not cropping - Javascript

Question

I am trying to use JCrop to crop an image. However the results are frustratingly wrong and I am not sure why. I have an image uploader that when someone selects in image a javascript changes the source of an image already on the page to match the newly upload image. I then have this code:

$('#myForm').ajaxForm({
    dataType: 'json',
    success: function (result) {
        $("#image-editor-preview img")
            .attr("src", "/Profiles/AvatarWorker/" + _id + "?random=" + Math.random())
                        .Jcrop({
                            aspectRatio: 1,
                            setSelect: [100, 100, 50, 50],
                            minSize: [160, 160],
                            maxSize: [160, 160],
                            onChange: setCoords,
                            onSelect: setCoords
                        });
    }
});

var x = 0, y = 0, w = 0, h = 0;
function setCoords(c) {
    x = c.x;
    y = c.y;
    w = c.w;
    h = c.h;
};

However this is what happens:

I have tried tried quite a bit to fix this but the end results are ALWAYS the same. Anyone have any ideas? Thanks.

Answer 1

I had the same problem, but I found, why it happens so.

In my css file I had this code:

img {
    width:  100%;
    height: auto;
    border: none;
} 

When I removed width and height from this definition, plugin started working correctly.

Answer 2

I was able to figure it out. Turns out that JCrop inside a twitter bootstrap modal has an issue with the width of the JCrop box. The twitter bootstrap modal is overriding the CSS inside the JCrop css. Had to modify the CSS in JCrop to not have this happen.

Answer 3

According to the Jcrop docs, it does not actually do the cropping. It only creates a image cropping UI. It then depends on the server doing the actual cropping; see http://deepliquid.com/content/Jcrop_Implementation_Theory.html . So it looks like the plugin is doing exactly what it is designed to do. It's now leaving the rest for you to do yourself on the server, as they show.