Question

我正在使用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。

Answer 1

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

Answer 2

我打算将此作为插件中的错误。我已在Google代码上向项目提交了bug report。我已经通过后端代码调整图像大小，而不是为临时代码设置样式。感谢您的建议，如果我收到错误的消息，我会更新。

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

试试这个对我有用： - ）

Safari和Chrome中的Jcrop坐标被覆盖

3 个答案: