1

我正在使用 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(){})并且遇到了相同的结果。我已经建立了一个产生相同结果的演示页面。我不确定这是 Jcrop 的错误还是我正在做的事情。它仅在我指定trueSize属性时发生。插件的非缩小版可以在这里查看。

4

3 回答 3

1

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

于 2011-01-13T18:39:19.313 回答
0

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

于 2011-01-14T01:05:23.487 回答
0

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

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

于 2014-08-27T11:23:02.720 回答