Jquery Safari和Chrome中的Jcrop坐标被覆盖

我正在使用jQuery插件进行照片处理。我终于让它在Firefox和IE8中成功运行了，但我在Chrome和Safari中遇到了一些奇怪的行为

Jcrop代码

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

在Firefox和IE中，每次调整/移动裁剪框时，它都会输出坐标。在Chrome/Safari中（当使用

onChange:

属性时），我得到一行正确的数据，但随后它继续用零覆盖该数据

• 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:0Y:0X2:0Y2:0W:0H:0X:0Y:0
• x2:0Y2:0W:0H:0X:0Y:0X2:0Y2:0
• w:0H:0X:0Y:0X2:0Y2:0W:0H:0
• x:0Y:0X2:0Y2:0W:0H:0

单独使用

onSelect:

属性会产生全零（Chrome/Safari）

所以我不知道他们为什么调用/覆盖这些值

编辑

---

我已经将代码更新为使用

$（function（）{}）

而不是

$（window）.load（function（）{}）

并得到了相同的结果。我提出了一个能产生相同结果的方法。我不确定这是Jcrop的错误还是我正在做的事情。只有在指定

trueSize

属性时才会发生这种情况。可以查看插件的非精简版本。

我认为您可能有一个双绑定事件，导致某些浏览器出现奇怪的行为。不要使用

$（window.load（function（）{…}））

试试

$（function（）{…}）

，我想您可能有一个双绑定事件，在某些浏览器中会导致奇怪的行为。不要用

$（window.load（function（）{…}））

试试

$（function（）{…}）

我将把这归结为插件中的一个bug。我已经提交了一个关于谷歌代码的项目。我已经求助于通过后端代码来调整图像的大小，而不是临时的样式。谢谢你的建议，如果我听到关于这个bug的反馈，我会更新它。

我将把这归因于插件中的bug。我已经提交了一个关于谷歌代码的项目。我已经求助于通过后端代码来调整图像的大小，而不是临时的样式。感谢您的建议，如果我听到有关此错误的反馈，我将更新此内容。

在使用函数onChange和onSelect时，您必须重新定位对象，如下所示：

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

---

试试这个，它对我有用：-）

在使用函数onChange和onSelect时，您必须重新定位对象，如下所示：

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

试试这个，它对我有用：-）