Jcrop координаты в Safari и Chrome перезаписаны - PullRequest
Новая
       31

Jcrop координаты в Safari и Chrome перезаписаны

1 голос
/ 12 января 2011

Я использую плагин 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);
}

Изначально я просто подумалон не сохранял координаты при вызове функции 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 Вт: 100 ч: 100
  • х: 50 лет: 50 х2: 150 г2: 150 Вт: 100 ч: 100
  • х: 0 г: 0 х2: 0 г2: 0w: 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 ч: 0 х: 0 у: 0 х2: 0 у2: 0 ш: 0 ч: 0
  • х: 0 у: 0 х2: 0 у2: 0 ш: 0 ч: 0

использование свойства onSelect: само по себе дает все нули (Chrome / Safari)

Так что я не понимаю, почему они вызывают / перезаписывают значения.

РЕДАКТИРОВАТЬ

Я обновил код для использования $(function(){}) вместо $(window).load(function(){}) и получаю те же результаты.Я поднял демонстрационную страницу , которая дает такие же результаты.Я не уверен, является ли это ошибкой в ​​Jcrop или чем-то, что я делаю.Это происходит только тогда, когда я указываю свойство trueSize.Не минимизированную версию плагина можно посмотреть здесь .

Ответы [ 3 ]

1 голос
/ 13 января 2011

Я думаю, что у вас может быть двойное событие, которое вызывает странное поведение в некоторых браузерах. Вместо $(window.load(function () { ... })) попробуйте просто $(function () { ... }).

0 голосов
/ 27 августа 2014

Вы должны изменить положение объекта, когда используете функции 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);
        };

Попробуйте, это работает для меня: -)

0 голосов
/ 14 января 2011

Я собираюсь записать это как ошибку в плагине.Я отправил отчет об ошибке проекту в коде Google.Я прибег к изменению размера изображения с помощью внутреннего кода, а не к временному стилю.Спасибо за предложения, я буду обновлять это, если я услышу обратно об ошибке.

...