Jcrop coordinates in Safari and Chrome overwritten

I am using the Jcrop plugin for jQuery for photo manipulation. I finally have it working successfully in Firefox and IE8, but am experiencing some weird behavior in Chrome and Safari.

Jcrop code

var api;
$(window.load(function() {
    var orimg = $('#image1');
    //Create Image to get dimensions of full size photo
    var pic = $('<img>').attr('src', orimg.attr('src')).css('display', 'none').appendTo('#form1');
    var h = pic.height();
    var w = pic.width();

    //set defaults for jcrop
    var opt = {
        aspectRatio: 1,
        onSelect: storeCoords, 
        onChange: storeCoords, 
        trueSize: [w, h], //actual size of pic vs. styled size on page
        bgColor: '#EEEEEE',
        bgOpacity: .7,
        setSelect: [150, 150, 50, 50]
    };

    $('#crop_button').click(function() {
        //initialize jcrop
        api = $.Jcrop(orimg, opt);
    });

    $('#cancel_button').click(function() {
        api.destroy();
    });

});

function storeCoords(c) {
    $('#X').val(c.x);
    $('#Y').val(c.y);
    $('#W').val(c.w);
    $('#H').val(c.h);
}

Originally I just thought that it wasn't storing the coordinates when the storeCoords function was being called. However I added the following code to the storeCoords function to see what was happening:

var msg = '';
$.each(c, function(index, value) {
    msg += index + ':' + value + ' ';
});
$('#debug_output').html(msg + '<br />');

In Firefox and IE it would output the coordinates each resize/move of the crop box. In Chrome/Safari (when using the onChange: property) I get one line of correct data but then it proceeds to overwrite that data with zeros.

• x:50 y:50 x2:150 y2:150 w:100 h:100
• x:50 y:50 x2:150 y2:150 w:100 h:100
• x:0 y:0 x2:0开发者_如何学JAVA y2:0 w:0 h:0 x:0 y:0
• x2:0 y2:0 w:0 h:0 x:0 y:0 x2:0 y2:0
• w:0 h:0 x:0 y:0 x2:0 y2:0 w:0 h:0
• x:0 y:0 x2:0 y2:0 w:0 h:0

using the onSelect: property by itself produces all zeros (Chrome/Safari)

So I'm at a loss as to why they are calling/overwriting the values.

EDIT

I've updated the code to use $(function(){}) instead of $(window).load(function(){}) and am experiencing the same results. I have put up a demo page that produces the same results. I'm not sure if this is a bug with Jcrop or something I'm doing. It only happens when I specify the trueSize property. The non-minified version of the plugin can be viewed here.

I think you may have a double-bound event that's causing the odd behavior in some browsers. Instead of $(window.load(function () { ... })) try just $(function () { ... }).

I am going to chalk this up to being a bug in the plugin. I've submitted a bug report to the project on Google code. I have resorted to resizing the image via the back-end code rather than styling for the interim. Thanks for the suggestions, I will update this if I hear back on the bug.

You have to reposition your object as you use the function onChange and onSelect as follow:

    imgObj.Jcrop(
          {
        onChange: function (coords) { YOUR PARAMS HERE; ScrollTo(scrollObj); },
        onSelect: function (coords) { YOUR PARAMS HERE; ScrollTo(scrollObj); },
        addClass: 'jcrop-centered'
          });

function ScrollTo(scrollObj)
        {
          var scrollto = scrollObj.height() * 2/5,
              scrolle  = scrollObj.width() * 2/5;
          scrollObj.scrollTop(scrollto);
          scrollObj.scrollLeft(scrolle);
        };

Try this it works for me :-)