Safari 和 Chrome 中的 Jcrop 坐标被覆盖

Posted 2023-02-25

【中文标题】Safari 和 Chrome 中的 Jcrop 坐标被覆盖

【英文标题】：Jcrop coordinates in Safari and Chrome overwritten

【发布时间】：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。

【参考方案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);
        ;

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