Safari 和 Chrome 中的 Jcrop 坐标被覆盖答案

【问题标题】：Jcrop coordinates in Safari and Chrome overwrittenSafari 和 Chrome 中的 Jcrop 坐标被覆盖
【发布时间】：2011-01-12 02:26:10
【问题描述】：

我正在使用 jQuery 的 Jcrop 插件进行照片处理。我终于让它在 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);
}

最初我只是认为在调用storeCoords 函数时它没有存储坐标。不过，我将以下代码添加到 storeCoords 函数中以查看发生了什么：

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

在 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: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
x:0 y:0 x2:0 y2:0 w:0 h:0

单独使用 onSelect: 属性会产生全零 (Chrome/Safari)

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

编辑

我已更新代码以使用$(function(){}) 而不是$(window).load(function(){})，并且我遇到了相同的结果。我提出了一个demo page 产生相同的结果。我不确定这是 Jcrop 的错误还是我正在做的事情。仅当我指定 trueSize 属性时才会发生这种情况。插件的非缩小版可以查看here。

【问题讨论】：

标签： jquery google-chrome safari webkit jcrop

【解决方案1】：

我认为您可能有导致某些浏览器出现奇怪行为的双重绑定事件。而不是$(window.load(function () { ... })) 试试$(function () { ... })。

【讨论】：

【解决方案2】：

我将把它归结为插件中的一个错误。我已经在 Google 代码上向项目提交了 bug report。我求助于通过后端代码调整图像大小，而不是临时设置样式。感谢您的建议，如果我收到关于该错误的回复，我会更新此内容。

【讨论】：

【解决方案3】：

您必须在使用 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);
        };

试试这个它对我有用:-)

【讨论】：