Jcrop v0.9.7 Available (bug fixes)

Releasing a new version today, Jcrop v0.9.7. This release fixes several bugs that were identified by users shortly after the previous version was posted last weekend.

Thanks to everyone who provided feedback and testing, the show-stoppers have been remedied. A brief list of fixes:

  • In some situations, the target image would disappear upon instantiation due to the image size not being properly detected (thanks to Graham and Daniel for pointing this out).
  • Clicking on an edge or sizing handle and immediately releasing the mouse button (without movement) would incorrectly cause the crop selection to release (thanks to Andy for pointing this out).
  • Using the basic jQuery plugin attachment method caused an additional copy of the image to be inserted into the DOM (minor).
  • Jcrop now attaches the API to $(selector).data(‘Jcrop’) instead of selector.Jcrop (obscure).

I still have a list of fixes and improvements to work on, but since a couple of the problems above could cause major difficulties in some situations, I wanted to get this update posted quickly.

Please test the new release and post feedback below. I’m now back checking up with the site every day and responding to feedback hopefully promptly. Thanks for hanging on!

Tags: ,

9 Responses to “Jcrop v0.9.7 Available (bug fixes)”

  1. Todd HorstNo Gravatar wrote:

    Is there a way to issue an update command so that it references the newest src of an image. The scenario is that i allow my user to upload an image, then i check its size. If its too large i send it to jcrop so the user can select a portion. I’ve done several prototypes both with the api and regular “simple” initialization. Now its come time to put everything together. Since i do everything via ajax I’ve started the jcrop image with no image and i also tried with a default image. It works at that point, but as soon as i upload an image and try to reset the img src the actual image wont update. Its not caching because i append a epoch time stamp to the image, and when i don’t initiate jcrop it does update the image. I tried destroying then updating the image and then reinitializing. This seemed to sometimes work to switch the image but then it never would recreate the jcrop instance.

    I don’t need to use the api, my requirements are very basic, but i do need to be able to switch the image on the fly and have jcrop recognize the new image. If this is currently possible and i am not setting it up correctly, could you possibly do a sample page, if its not currently possible could you add a refresh api to re-grab the image from the src field?

    Either way if you could let me know that would be awesome. Thanks for your great work, its really a great tool and exactly what i was looking for.

  2. Anders PedersenNo Gravatar wrote:

    Hey there,

    very nice plugin. I agree with Todd, it would be very nice to be able to upload an image using ajax, inject new image tag into the DOM (or change img src attribute on existing image tag) and be able to “update” JCrop to re-grab the image.

    I’ve accomplished this in Internex Explorer 7 with no hassle. However, in Chrome and Firefox, JQuery width() and height() for the updated image tag always return 0, even though you are using the Image.onload event to fire up JCrop in your attachWhenDone(from) function. This behaviour occurs on DOM manipulated imagetags only – and makes it impossible to use JCrop, as long as it uses width() and heigh() to calculate the new canvas…

    I cannot figure out if this is a JQuery bug? I’ve spent some time on google to see if there is any documentation about this behavior in Firefox, but did not stumble over anyone having the same problem.

    Anyone have a suggestion or know how to fix this?

    Anyway, indeed, you’ve done some extraordinary work with JCrop – keep up the good work.

  3. Chris JonesNo Gravatar wrote:

    Todd/Anders,

    If I understand you correctly, I managed to achieve the desired result using the following function. I call it after I receive a response from the server following an image crop:

    function refreshImage(imgsrc){
    $(‘.selector’).one(“load”, function(){
    imgEditObj = $.Jcrop(‘.selector’,{
    });
    });

    // If JCrop is active, destroy it
    if ( typeof( window[ 'imgEditObj' ] ) != “undefined” ) {
    imgEditObj.destroy();
    }

    // Rebuild the image edit area
    $(‘.selector’).attr(‘src’, imgsrc + ‘?’ + now.getTime(););
    }

    Works fine for me in all browsers except Safari 4 (which doesn’t appear to be supported yet anyway.

  4. Chris JonesNo Gravatar wrote:

    Scrap the last part of my post. After writing it I upgraded to 0.9.7 and this fixed my Safari 4 issue.

    Keep up the good work.

  5. Todd HorstNo Gravatar wrote:

    just by reading your code it looks like something that would work. Until i read your post i was able to make it work by waiting until the image was loaded and then destroy and recreate the jcrop instance. My changes are below

    I was also able to solve this issue, at least as far as ive gotten to test.

    I took the api sample and made the following changes:
    function Jrefresh() {
    $(‘#cropbox’).load(function(){
    jcrop_api.destroy();
    initJcrop();
    });
    };

    was added after the initJcrop proc.

    $(‘#1′).click(function() {
    $(‘#cropbox’).attr(“src”,”demo_files/flowers.jpg”);
    Jrefresh();

    });
    $(‘#2′).click(function() {
    $(‘#cropbox’).attr(“src”,”demo_files/sago.jpg”);

    Jrefresh();

    });
    $(‘#3′).click(function() {
    $(‘#cropbox’).attr(“src”,”demo_files/sagomod.jpg”);
    Jrefresh();
    });
    was added at the bottom of $(window).load(function(){

    1
    23

    was added after .

    Obviously this is just a rough sample, but the idea of waiting until the image is done loading and then recreating the jcrop is the real idea.

  6. Todd HorstNo Gravatar wrote:

    Wow i butchered my last post, the 1 2 and 3 links are just a hre=’#’ with and id of 1,2, or 3. They dont do anything but call the js to switch the img src. I put that after the div with the class article.

    Of all of it the $(‘#cropbox’).load(function(){ line is really all that matter. Its what waits until the image is loaded before destroying and recreating the jcrop object

  7. EricNo Gravatar wrote:

    This doesn’t work at all in IE8 in non-compatibility mode. It’s not draggable, resizable, etc.

  8. Todd HorstNo Gravatar wrote:

    Agreed IE8 is not working…

  9. adminNo Gravatar wrote:

    Eric, “non-compatibility mode” — that’s classic! I think that’s definitely what it should be called. Thanks to everyone who pointed this out, I downloaded IE8 onto another computer here and I think the problem is now fixed. Released a new version today. Download it and check it out, and let me know if that does the trick!