boxWidth & boxHeight causing distorted image with large images

[chrislentz]

I am having an issue where I am using boxWidth and boxHeight to crop large images 2500px +. What I have found, is that some images (normally very large 2500+) appear distorted in the crop window and if you still crop them, the crop comes out in the top left corner and is not the selection you made.

Here is one of the images I am having an issue with: http://cloud.rapidmoviereviews.com/people/o-alice-eve-n61nf5hcwu.jpg

Here is a screencap of the issue occuring: http://cloud.rapidmoviereviews.com/jcrop-github.png

My Code:

$('#jcrop-area').Jcrop({
        boxWidth: 338,
        boxHeight: 500,
        aspectRatio: 169 / 250,
        onChange: updateCoordinates,
        onSelect: updateCoordinates,
        setSelect: [0, 0, 500],
        minSize: [338, 500]
    });

[Boztown]

I'm experiencing this same issue in Firefox. In Chrome the image isn't distorted but the proportional coordinates are wrong and the crop happens in the wrong area.

[compwright]

I'm also experiencing this issue in Firefox, but not in Chrome.

[micti]

Me too, I found width of image has been changed auto without any reason!

In source file, I try to change $origimg.after($img).hide(); to $origimg.hide();

It works for me!

[geoffrey-brier]

I'm facing the same problem, @Boztown is right it's a scale problem but don't know how to fix it (@micti your fix does not work for me, sadly :( ).

[davidjonas]

Having the same problem... loosing hope looking at the dates in here... was there a solution for this?

[compwright]

The solution is don't do it. Resize a copy the image to the size you are displaying at for preview purposes. This is actually one of the recommendations on the jcrop website and also helps with performance since the user doesn't have to download the entire original image into the browser in order to do cropping.

[byhoratiss]

@compwright Correct me if im wrong, but if you use a resized version of the original image to make the crop, the coordinates will be wrong if you crop the original with that coords.

[compwright]

Per the manual:

The ideal solution to large images is to pre-size them on the server:

• Pre-sized image is created server-side
• Invoke as per Explicit Sizing Method (setting trueSize)
• User crops representative pre-sized image
• Jcrop transforms the coordinates automatically

I can confirm that it works. Read this page and pay particular attention to the trueSize option.

[r4y7s]

@micti thanks!!!!

In source file, change $origimg.after($img).hide(); to $origimg.hide();

It works!

[seltzlab]

I confirm it works, @micti thanks!!!!

[bernland]

Thank you, @micti

In jquery.Jcrop.min.js, I changed A.after(D).hide() to A.hide().

[Scramble90]

Thanks to @bernland it worked!

[supreetSekhon]

jcrop is not cropping properly large image of size 1200 by 400 although it is makinf image of 600 by 134 do help me

[Scramble90]

@supreetSekhon I don't really understand your question. Can you tell more detail? Maybe your jcrop configuration. If I can help I will help you.

[vaibhav-Tech]

I am facing the same issue. For large image display for crop functionality I have used the boxWidth: 650, boxHeight: 400 . Now, it displays the big image properly but after selecting the crop portion of that image it does not display the result proper. It does not display the cropped part. Instead of that it shows other part of the image. Please suggest the solution.

// initialize Jcrop $('#preview').Jcrop({ minSize: [32, 32], // min crop size aspectRatio : 1, // keep aspect ratio 1:1 bgFade: true, // use fade effect bgOpacity: .3, // fade opacity boxWidth: 650, //Maximum width you want for your bigger images boxHeight: 400, //Maximum Height for your bigger images onChange: updateInfo, onSelect: updateInfo, onRelease: clearInfo }, function(){ var bounds = this.getBounds(); boundx = bounds[0]; boundy = bounds[1]; // Store the Jcrop API in the jcrop_api variable jcrop_api = this; });

[sclavel]

try

(many css libraries will have a img {max-width: 100%;} that will screw up JCrop's calculations)

[harishreddy9999]

for large images after cropping is done in the preview pane it is showing what i am cropping but after clicking the crop image button it is not showing the same portion which i have cropped. can anyone help? Thanks in advance

[gurinlife]

do you use width 100% for the image?

[markosjal]

I had this problem and removed

<link rel="stylesheet" href="css/jquery.jcrop.css" type="text/css" />

from the head of my page

Problem gone on firefox and Chrome on android.

[Utsaww]

Image resize not working for me as I tried a lot

is there anything I have missed or done wrong?

 var jcp;

    Jcrop.load('target').then(img => {

        jcp = Jcrop.attach(img, { multi: true });

        jcp.setOptions({
            boxWidth: 500,
            minSize: [200, 300],

        });

    });