I'm using Jcrop with a gallery plugin called gallery view. When an image is displayed in gallery it gets top or left attribute depending on aspect ratio to look center. When loading jcrop for that image jcrop-tracker element position it self badly ( minus top or left position eg: image: 17 top => jcrop-tracker will not have 17 top).

It's an issue or i missed something ?

Thank you,

This problem seems to be happening because the width of the shade divs are a decimal rather than an integer... and the shade doesn't quite cover the actual image completely sometime. I changed updateShade() to this and it works for me on Chrome now:

  function updateShade(c)
  {
    shades.top.css({
      left: px(c.x),
      width: px(Math.round(c.w)),
      height: px(c.y)
    });
    shades.bottom.css({
      top: px(c.y2),
      left: px(c.x),
      width: px(Math.round(c.w)),
      height: px(boundy-c.y2)
    });
    shades.right.css({
      left: px(c.x2),
      width: px(boundx-c.x2)
    });
    shades.left.css({
      width: px(c.x)
    });
  }

Currently, the allowSelect, allowMove and allowResize options are not present in the options section of the manual page. The should be added so that people know they exist.

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]
    });

I feel your problem is hands down the best open-source tool available for image cropping however its missing one CRITICAL functions which everyone keeps talking about but no one is able to provide a solution for mainly the ability to zoom in/out and move the image around.

There is only one true solution I am aware of which I am sure you must have heard of located on the site "http://kroppr.rborn.info/". If you review their tool you can see how you are able to zoom in/out of an image as well as being able to move the background image around till it matches the area you want to crop.

Would you be able to provide instructions on how we could accomplish the same functionality with jcrop? I feel instantly jcrop would become the standard if this were integrated.

Less important in my opinion but also useful would be the capability of rotating the image like kropper tool.

Any help or advice would be greatly appreciated for this!

I've tried using destroy() for non-image elements, and it doesn't work. It simply removes the whole element out of dom - not what it's expected to do.

I grasped into a code for a bit, and it turned out that the problem happens on line 321:

 320     } else {
 321       $img = $origimg.css(img_css).show();
 322       img_mode = false;
 323       if (options.shade === null) { options.shade = true; }
 324     }

the $img doesn't contain a cloned copy of origimg, so the following code:

 332         $div = $('<div />').width(boundx).height(boundy).addClass(cssClass('holder')).css({
 333         position: 'relative',
 334         backgroundColor: options.bgColor
 335       }).insertAfter($origimg).append($img);

just moves the original element into a new position.

For some reason cloning the element doesn't work for me, so i did a small workaroung. I thing it doesn't worth
to be pulled into the repo as it doesn't fix the root of the problem, but people might find it useful

aslushnikov@a870a64

Thanks for your work,

Andrey

I need to block users for clicking to the area, that is not in the crop. It sometimes confuses them, when they click to the black area and the crop disappears.

This page: http://code.google.com/p/jcrop/

Needs to link to this github repo and issue tracker.

Goal:

• make multiple selections on the same image
• 2nd selection doesn't cancel 1st selection (both are visible at the same time)

Additional:

• concatenate multiple selections in on square polygon

Or is it better to make multiple instances of jCrop?
(but how are they then stacked, they are supposed to be on the same level, not one on top of the other)

Hi, the preview example code currently stretches the image instead of padding it to fit the aspect ratio. As the solution is non-obvious (due to some browser bugs), I thought I'd share the solution in the hope that it would be published in the demo, and so fewer users would use the broken version...

Full article: http://nathanaeljones.com/573/combining-jcrop-and-server-side-image-resizing/

Demo of preview: http://images.imageresizing.net/JCropSample/Advanced.aspx

Hit 'view source' on the demo page to get the code. The demo page is comprehensive in it's handling of aspect ratio locking and multiple instance handling, but feel free to strip everything out except the improved preview code if you'd like. I've taken the approach with the demo code of allowing the user to provide hints in the preview div's inline style for the preferred dimensions of the preview window. Also, it shows how to use server-side resizing to handle very large images without driving the browser crazy, but that's easy to pull out.

Scaling images down works perfectly if you provide boxWidth and boxHeight. Scaling up however doesnt. Is there an easy way to implement that or am I missing something?

Hi

I've noticed that when running the newest version of Jcrop and jQuery 1.6.1 in IE 7/8 the image doesn't show. It does work in IE 9 and Chrome.

Any ideas?

Thanks
Jon

Hello and thanks for this plugin,

But the onSelect function is called when I use setSelect but not when I use animateTo :)

Thanks !

So I dynamically attach JCrop to an img inside a JQueryUI dialog. I'm trying to use boxWidth and boxHeight to intelligently size the image within.

I call jcrop_api.destroy() after use of the dialog is complete.

Then, if I open another dialog, the img inside retains the sizing of the first invocation.

Can't seem to find any workarounds. Advice?

I'm on d8c367c from Jan 1, 2012

Nicely done on this library.

I would love to have the ability to display the selection as an ellipse to provide circular selection. While I can calculate the ellipse from the rectangular selection coords, I would like to have the marching ants show a circular selection area.

can't really explain it, if i set aspectRatio to 1.0 on a square image, when the selection is drawn, the image gets skewed, if I drag the selection to the right at about the half of image, the inside selection appears black like here
http://www.freeimagehosting.net/maju3

moving the selection to the left image and selector appears normal again:
http://www.freeimagehosting.net/jyujn

it appears as if 1/3 of image is unselectable

what is the issue here and how can i solve it ?
using firefox 11, linux ubuntu, with latest jquery 1.7.1, jcrop 0.9.9 from github

I use jCrop to resize website screenshot down to a desired size. I need end result of 740x656.

So I set aspect ratio to 740/656 - the user isn't allowed to make a selection smaller than that.

If the user sets jCrop selection to 940 width, jCrop calculates a height of 833. But in actuality, the correct dimension should be 940 x 833.297297297297...

So when I pass these coordinates to PHP, the resized image at 740x656 comes back very blurry. Because PHP creates image that is 740x656 from the 940x833 selection.

I have spent some 6 hours or so investigation this issue so far. I'm under the impression the issue is with jCrop allowing the user to make selection that should not be allowed. The aspect ratio isn't correct on the user's selection:

740/656 = 1.1280 48780 48780 48780 48780...

940/833 = 1.1284513805522208883553421368547

940*656/740 = 833.297 297 297 297 297 297 297...

Any ideas how I can solve this problem? I need the resulting image to be clear.

there is a 2011 version, you are still using 2007

deepliquid.com is often down recently
it's not easy to acces documentation
maybe a readme on github can do the trick

anyway good plugin

1. Place the image into a div with the overflow style to auto or scroll. [for large images]
2. Without scrolling the image, crop a section from the top left. It
   should work as expected.
3. Scroll the image to see to the right.
4. Attempt to crop the any section. Upon mouse-down, the image jumps back to
   it's original location.
5. Scroll the image again to view the top right corner. You should see
   the crop section still rendered as expected.
6. if we rendered the images without scrolls everything works fine.

Details:
JCrop version:v0.9.9 (build:20120109)
Chrome v 17.0.963.56 m
Windows 7 enterprise

Just a heads up... 1.9 has finally deprecated $.browser() and Jcrop is using it to detect msie in several places.

Kinda off topic, but wanted to let someone know...

When I use Jrop, a radio button is add on the left of my image
I've dig a little and find out that it's because of KeyManager. In fact, it create a radio input which seem useful for moving the crop selection with the keyboard.

To hide it, I've change this:

        position: 'fixed',
        left: '-12000px',
        width: '12px'
      }),

by this :

        position: 'fixed',
        left: '-12000px',
        width: '12px'
      }),

Since I don't really understand why this input is here, I don't know if this fix is a good one.

Hope somebody will enlighten me about it and fix this properly.

i get these errors:
in chrome
Uncaught SyntaxError: Invalid regular expression: /(^|.)jcrop(.|$)/: Stack overflow
in safari:
jquery.js:1751 RangeError: Maximum call stack size exceeded.

i just updated to 0.9.12 jcrop and 1.9.1 jquery

does anyone know what could be wrong or what to check. thank you.

I posted the question/issue on StackOverflow here:
http://stackoverflow.com/questions/13075739/jcrop-shaking-image-in-facebook-canvas-when-dragging-selection

The problem I'm having is that code that works great in a JSFiddle or outside of the Facebook canvas is causing a weird issue in the Facebook canvas. The image shakes a very tiny bit as you drag the select box which causes a bad visual user experience. I'm going to try to dig a little deeper beyond stripping the code down to it's most simple use case but any insight would be greatly appreciated

An interesting bug for you that only seems to happen with current WebKit browsers:

I have an whose src I set with something like this:

document.getElementById('imageForCropping').src = someImageSrc;

No problems there - pretty bog standard DOM / JavaScript. The src is loaded into the .

Then I do this:

        jcropOptions    
        ,function(){
        // Use the API to get the real image size
        var bounds = this.getBounds();
        boundx = bounds[0];
        boundy = bounds[1];


                this.animateTo([ 0,0,boxMinWidth,boxMinHeight ]);   //width and height settings seems to NOT make the box smaller than its min size (which is good obviously)

        // Store the API in the jcrop_api variable
        jcrop_api = this;
      }
    );

Which puts the cropping widget on the image. BUT...

The problem

The issue is that when Jcrop is applied to the <img> and doing its thing, the image that was already loaded and present DISAPPEARS, is replaced with a BLACK BACKGROUND and the image LOADS AGAIN!

It is easy to spot because the image src in question is quite large and takes a second or to to fully draw in the browser.

So I am wondering if this is a known issue with either WebKit or Jcrop? Or am I doing something blatantly wrong?!?!

Thanks a lot guys. It's a great piece of work and a fine project.

The issue can be seen here: http://www.chicengine.com/pinterest/

To recreate the error:

1. Scroll halfway down the page.
2. Click on an image.
3. Try to drag crop area.
4. You will see that you are "jumped" further down the page.

I've run into a problem when the image (and the Jcrop instance) are instantiated within a tab. The image does not appear at all when switching to the tab with the image and the crop rectangle is reduced to a dot.

I assume this is because the width/height for an object with "display:none" are 0, which messes with the Jcrop code. I'm about to dig in the code and try to fix it but was wondering if anyone found a way to solve it already.

The details can be found here. A video illustration is also included.
http://stackoverflow.com/questions/9510568/jcrop-preview-contains-strange-error

Note that i am not the author of the post, I just have same issue.

Well the title explains it. It works fine otherwise.

I have a hidden modal dialog that is supposed to show jCrop in particular conditions (BTW, I am using modal dialogs in Twitter Bootstrap - http://twitter.github.com/bootstrap/ but I am sure that a normal fixed div with display:none is behaving the same)

1. Jcrop does not work if I apply at an hidden element and show it later. The workaround I used is to use $("mypic").jCrop({...}) after the dialog show up (bind on 'shown' in the bootstrap dialog).
2. In the body of the dialog I have soemthing like:

        <div style="width:70px; height:70px; overflow:hidden; margin-bottom:5px;">
            <img src="http://deepliquid.com/Jcrop/demos/demo_files/pool.jpg" class="preview" />
        </div> 

        <img src="http://deepliquid.com/Jcrop/demos/demo_files/pool.jpg" class="target" /> 

Now if after I use JCrop the first time, I substitute the picture with:

            var $trg = $('.target', $id);
            var  $preview = $('.preview', $id);

            $trg.attr('src', pic_url);
            $preview.attr('src', pic_url);

and I call again $("mypic").jCrop({...}) , the result is horrible:
The picture is deformed and using the width and height of the previous picture and there are now 2 jCrop section squares, one of which is showing the old picture in the square. See : http://d.pr/niIk

when calling destroy() i expect that this will restore the img element in its original state - you can see this in "tutorial5.html"

Hey there, I have no idea of what you want to add to the new version, but you should really publish a new one as fast as possible. the current 0.9.8 release is doing crazy shit in ie7. it tries to load strange urls. something like http://localhost/foo/barfunction(){ return ... }. Using the handlers also requests more of such urls. Using the latest HEAD is working nicely

Compatibility problem with Bootstrap 2.3. After selecting the crop area, the crop area continues to move as the mouse moves outside of the image causing "Uncaught RangeError: Maximum call stack size exceeded" in jQuery 1.9.1 - http://jsfiddle.net/dragoncrew/L5mad/6/. Tested using Chrome 24 and FF 19 and the issue occurs in both.

• jCrop works with Bootstrap 2.2.2 - http://jsfiddle.net/dragoncrew/6AbPg/1/
• jCrop works without Bootstrap - http://jsfiddle.net/dragoncrew/n2MmG/2/

I keep getting the error above with the latest version of jQuery. I moved back to the older gem and everything started to work again. It must be the new version of jQuery. I read about it here AudithSoftworks/Uniform#272.

Hope it helps :)

We are trying to use local file URLs when running our application locally to simulate images on Amazon S3, but Jcrop breaks when trying to initialize with a local image file.

Example URL:
file:/C:/tomcat/temp/d4d6566c-a6c6-434a-bac4-29fafd3751c7.jpg

If I copy the URL into my browser address bar, I can see the image.

This occurs Firefox and Chrome.

The download version (in the site) is outdated. That version is not compatible with jQuery 1.9

Is there any way to optimise for mobile? It works .. bad. I mean "slow" and "stucks touches all over the page".
Well, the "stucks touches all over the page" i'll try to fix (not sure, but may be bootstrap bug), but "slow" is native.

Changing the aspect ratio right now forces a selection of 0,0,0,0 to appear even if nothing was previously selected.

When something was previously selected, it changes the selection, but doesn't center the result over the previous area as expected.

if the image is a png file with transparent background, then the black background color of div will cover the image.

Been having trouble with this for a day or two. When I set the relevant options the Jcrop works perfectly, however when I add in the setSelect option the selected area is movable and changeable except that you can't STOP moving or changing. This is happening in FF, Chrome and IE. What happens is when you try to move the selection, the box continues to follow the mouse even after releasing the mouse button and continually even when your mouse goes beyond the image (though the box stays in the image). If you manage to create a new selection area, you cannot stop changing the size. The last corner just continues to follow my mouse around much the same way as just moving the box. The error received by developer tools is that boundx is undefined, however simply removing (or commenting out) the setSelection assignment and it works just fine.

Below is the code I've used to reproduce this in the most minimal way possible.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"><title>jCrop + Dialog TEST</title>
    <script type="text/javascript" src="Include/jquery-1.7.2.min.js"></script>
    <link href="Custom/jCropStyles.css" rel="Stylesheet" type="text/css" />
    <script type="text/javascript" src="Include/jquery.Jcrop.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var jCropOptions =
            {
                onSelect: jCropUpdate,
                onChange: jCropUpdate,
                aspectRatio: ($('#jCrop_hdnTargetWidth').val() / $('#jCrop_hdnTargetHeight').val()),
                boxWidth: 500,
                boxHeight: 500
            }
            if ($('#jCrop_CropX2').val() > 0) 
            {
                jCropOptions.setSelect = 
                [
                    $('#jCrop_CropX').val(), 
                    $('#jCrop_CropY').val(),
                    $('#jCrop_CropX2').val(),
                    $('#jCrop_CropY2').val()
                ];
            }

            $('#jCrop_jCropImage').Jcrop(jCropOptions,
            function () {
                var bounds = this.getBounds();
                boundx = bounds[0];
                boundy = bounds[1];
                jcrop_api = this;
            });
            $('#jCropPreviewContainer').css({
                'width': $('#jCrop_hdnTargetWidth').val(),
                'height': $('#jCrop_hdnTargetHeight').val()
            });
        });

        function jCropUpdate(c) {
            storeCoords(c);
            updatePreview(c);
        };

        function storeCoords(c) {
            $('#jCrop_jCropX').val(c.x);
            $('#jCrop_jCropY').val(c.y);
            $('#jCrop_jCropW').val(c.w);
            $('#jCrop_jCropH').val(c.h);
        };

        function updatePreview(c) {
            if (parseInt(c.w) > 0) {
                var rx = 100 / c.w;
                var ry = 100 / c.h;
                $('#jCrop_jCropPreview').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'
                });
            }
        };
    </script>
</head>
<body> 
    <form method="post" action="Dev-jCrop.aspx" id="form1" enctype="multipart/form-data">
        <input type="hidden" name="jCrop$hdnCropX" id="jCrop_CropX" value="25" />
        <input type="hidden" name="jCrop$hdnCropY" id="jCrop_CropY" value="50" />
        <input type="hidden" name="jCrop$hdnCropX2" id="jCrop_CropX2" value="175" />
        <input type="hidden" name="jCrop$hdnCropY2" id="jCrop_CropY2" value="200" />
        <input type="hidden" name="jCrop$hdnTargetWidth" id="jCrop_hdnTargetWidth" value="100" />
        <input type="hidden" name="jCrop$hdnTargetHeight" id="jCrop_hdnTargetHeight" value="100" />
        <div id="jCrop_pnlCrop" style="width: 650px">
            <div id="modalCrop">
                <div id="jCropImageContainer" style="width:500px; height: 500px; float: left;">
                    <img id="jCrop_jCropImage" src="http://localhost/FileRepository/Default.aspx?FRLID=37&amp;Rand=1144118105" />
                </div>
                <div ID="jCropPreviewContainer" style="height: 100px; width: 100px;overflow:hidden;float: right;">
                    <img id="jCrop_jCropPreview" class="jcrop-preview" src="http://localhost/FileRepository/Default.aspx?FRLID=37&amp;Rand=1144118105" />
                </div>
            </div>
            <input type="hidden" name="jCrop$jCropX" id="jCrop_jCropX" value="426" />
            <input type="hidden" name="jCrop$jCropY" id="jCrop_jCropY" value="156" />
            <input type="hidden" name="jCrop$jCropW" id="jCrop_jCropW" value="346" />
            <input type="hidden" name="jCrop$jCropH" id="jCrop_jCropH" value="346" />
            <input type="hidden" name="jCrop$jCropPath" id="jCrop_jCropPath" />
            <input type="hidden" name="jCrop$jCropFileName" id="jCrop_jCropFileName" />
            <input type="submit" name="jCrop$btnCrop" value="Crop" id="jCrop_btnCrop" class="BaseButton SubmitButton" />
        </div>
    </form>
</body>
</html>

I've tried update jQuery to the latest but It still crashed everytime I try to crop image in IE7.

IE8+ is ok.

Please help.

Please support for a double-click/tap event handler on the cropped area (not the rest of the image) which could then be hooked into to execute the crop/etc.

Hello,

Could you check demo page tutorial3.html on IE9. On my computer I observer strange behavio: Jcrop don't attache to image, but if I copy script and run it manually from ie developer console then script works normally. I checkout previous version 0.9.9 and demo tutorial3 works like a charm.

on FF and Chroma Jcrop works without problems.

My computer configuration:
-Windows 7 x64
-IE 9.0.8112.16421 (polish language) - actualization version: 9.0.8 kb 2719177

It's really strange behavior and if you can't reproduce it try clear browser cache and refresh page 2-3 times.

I've been trying to use keypress event for Enter, but I couldn't do it because, apparently, Jcrop uses keypress event itself. Is there a way to have a callback for "Enter", which usually indicates that a crop is complete?

MOVED FROM GOOGLE CODE

What steps will reproduce the problem?

1. Open JCrop on an image
2. Replace the image source in the DOM via JavaScript with an image of a different size
3. Call destroy()
4. Open JCrop on the updated image

What is the expected output? What do you see instead?
You'll see that the image is now stretched to the dimensions of the previous image.

What version of the product are you using? On what operating system?
0.9.9

Please provide any additional information below.
The reason this happens is because when JCrop is first initialized, it attaches height and width attributes to the tag that you initialize it with. However, after calling destroy(), the height and width attributes are still present, so you can't just update the source and open JCrop again. The fix would be to remove the height and width attributes (or reset them to their original values) in the destroy() method.

Hi!

I have a crop selection like this:

http://deepliquid.com/projects/Jcrop/demos.php?demo=handler

What must I do to crop my image with X1 Y1 X2 Y2 W H informations?

I'm using Symfony2 framework.

Many Thanks!

While using the setSelect method of the Jcrop object I'm finding that sometimes it reloads the selection in a totally wrong area of the image. For example if I have 100x100 pixel image with a selection of { x: 10, y:10, x2: 30, y2: 30} when I reload I might get a much smaller selected area in a completely different part of the image. Has anyone run into this and/or have ideas on a fix? It's very intermittent and I can't seem to find a pattern for how to reproduce it. Here is the code we're using:

$(function() {

  jcrop_options = {
    aspectRatio: 1,
    onSelect: function(coords) {
      updateCropFormFields(coords);
      showCropFormButton(); 
    }
  };

  if ($(".image_cropper img").length > 0) {
    loadSelectionIfAvailable();
  }

  function loadSelectionIfAvailable() {
    var form = $("#finalize_crop_form");
    var x = parseInt($("#image_crop_offset_x", form).val());
    var y = parseInt($("#image_crop_offset_y", form).val());
    var height = parseInt($("#image_crop_height", form).val());
    var width = parseInt($("#image_crop_width", form).val());
    jcrop = $.Jcrop(".image_cropper img", jcrop_options);
    jcrop.setSelect([x, y, height, width]);
  }

});

1. If boxWidth or boxHeight is set and image is downscaled, maxSize fails to scale down.
   minSize limits the selection properly (except for the round-off error described below).
   maxSize limits the selection to actual pixels of maxSize, not the scaled-down value of MaxSize.
2. With big images, minSize restriction reports with an error between 1 and 4 px. Example:
3. Image is 1800px wide
4. boxWidth: 500
5. minSize: [100, 100]
6. minimal crop reports w: 98, h: 98; It should have stopped just one pixel earlier (which is 102x102), or return 100x100.

Its a small difference, but I'd rather be on the upper side of a round-off than the lower. :)
"Uglish" rudimentary hack would be to return 100x100 even if actual value is 98 or 101 - at these scale rates, it holds 3,25 actual image pixels within one display pixel, so rounding it to the actual minSize dimensions on an already approximate minimal crop would still hold a true representation of what the user actually sees.