JCrop大图像问题

Question

可以设置一些maxWidth和maxHeight来裁剪大图像吗？我在文档中发现了maxSize，但它只适用于选择区域。我也试过trueSize

function initJCrop(){
    // Create variables (in this scope) to hold the API and image size
    var jcrop_api,
        boundx,
        boundy,

        // Grab some information about the preview pane
        $preview = $('#preview-pane'),
        $pcnt = $('#preview-pane .preview-container'),
        $pimg = $('#preview-pane .preview-container img'),

        xsize = $pcnt.width(),
        ysize = $pcnt.height();

    //console.log('init',[xsize,ysize]);
    $('#imageEdit').Jcrop({
      onChange: updatePreview,
      onSelect: updatePreview,
      aspectRatio: 220 / 55,


    },  function(){
      // Use the API to get the real image size
      var bounds = this.getBounds();
      boundx = bounds[0];
      boundy = bounds[1];
      // Store the API in the jcrop_api variable
      jcrop_api = this;

      jcrop_api.animateTo([ 120,120,20,20 ]);
      jcrop_api.trueSize([200, 100])
      // Move the preview into the jcrop container for css positioning
      $preview.appendTo(jcrop_api.ui.holder);

    });

现在我的形象就像这个。它们超出了模态的范围：

​

Answer 1

我找到答案了。您应该使用boxHeight和boxWidth选项。如下所示：

$('#imageEdit').Jcrop({
      onChange: updatePreview,
      onSelect: updatePreview,
      aspectRatio: 220 / 55,
      boxWidth: 350

    },  function(){
      // Use the API to get the real image size
      var bounds = this.getBounds();
      boundx = bounds[0];
      boundy = bounds[1];
      // Store the API in the jcrop_api variable
      jcrop_api = this;

      jcrop_api.animateTo([ 120,120,20,20 ]);
    //  jcrop_api.trueSize([200, 100])
      // Move the preview into the jcrop container for css positioning
      $preview.appendTo(jcrop_api.ui.holder);

    });