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);

    });

JCrop 大图像问题

JCrop big images issue

javascript

jquery

jcrop