JCrop неправильно обрезает изображение

Я пытаюсь обрезать изображение с помощью JCrop, однако изображение, которое я сохраняю на своем сервере, перекошено. Я не могу заставить размеры работать должным образом. Вот мой код JCrop:

...
var imgwidth = $("#previewSub2").width();
var imgheight = $("#previewSub2").height();

$("#previewSub").css("height", "220px");
$("#previewSub").css("width", "auto");

$("#previewSub").Jcrop({
    onChange: showPreview,
    onSelect: showPreview,
    aspectRatio: 1,
    setSelect: [0,imgwidth,0,0],
    minSize: [90,90],
    addClass: 'jcrop-light' 
});

Обратите внимание, что #previewSub — это изображение, которое я обрезаю, а #previewSub2 — это миниатюра (предварительный просмотр) обрезаемого изображения. Вот остальная часть моего кода JCrop:

function showPreview(coords)
{
    var imgSize = $("#previewSub").height();
    var imgWidth =  $("#previewSub").width();

    var rx = 150 / coords.w;
    var ry = 150 / coords.h;

    $('#x').val(coords.x);
    $('#y').val(coords.y);
    $('#w').val(rx*imgWidth);
    $('#h').val(ry*imgSize);

    $('#previewSub2').css({
        width: Math.round(rx * imgWidth) + 'px',
        height: Math.round(ry * imgSize) + 'px',
        marginLeft: '-' + Math.round(rx * coords.x) + 'px',
        marginTop: '-' + Math.round(ry * coords.y) + 'px'
    });
}

Для #x, #y, #w, #y я не совсем уверен, какие значения поставить для val(). Я пробовал всевозможные комбинации, но кадрирование всегда было выключено.

Обратите внимание, что предварительный просмотр эскизов работает корректно.


jquery jcrop
person buydadip    schedule 07.01.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я попытался использовать ваш код и столкнулся с аналогичной проблемой. Используя код из руководства по адресу https://rubyplus.com/articles/3951-Cropping-Images-using-jCrop-jQuery-plugin-in-Rails-5 работал у меня, что должно быть примерно так, как показано ниже, как стандартный jQuery:

var ImageCropper,
 bind = function(fn, me){ return function(){ return fn.apply(me,arguments); }; };

jQuery(function() {
  return new ImageCropper();
});

ImageCropper = (function() {
  function ImageCropper() {
    this.updatePreview = bind(this.updatePreview, this);
    this.update = bind(this.update, this);
    $('#cropbox').Jcrop({
      aspectRatio: 1,
      setSelect: [0, 0, 600, 600],
      onSelect: this.update,
      onChange: this.update
    });
  }

  ImageCropper.prototype.update = function(coords) {
    $('#course_crop_x').val(coords.x);
    $('#course_crop_y').val(coords.y);
    $('#course_crop_w').val(coords.w);
    $('#course_crop_h').val(coords.h);
    return this.updatePreview(coords);
  };

  ImageCropper.prototype.updatePreview = function(coords) {
    return $('#preview').css({
      width: Math.round(100 / coords.w * $('#cropbox').width()) + 'px',
      height: Math.round(100 / coords.h * $('#cropbox').height()) + 'px',
      marginLeft: '-' + Math.round(100 / coords.w * coords.x) + 'px',
      marginTop: '-' + Math.round(100 / coords.h * coords.y) + 'px'
    });
  };

   return ImageCropper;

})();

Также убедитесь, что если у вас есть строгие параметры, вы разрешаете урожая_х, урожая_у, урожая_h и урожая_w.

person Sam House    schedule 01.12.2016