Question

我是一个小小的细节，远离让真棒裁剪（fengyuanchen - GitHub）工作我需要它。我可以在加载表单时以编程方式设置宽高比，但这会打破预览窗口。我已经检查了文档，但遗憾的是，我不熟悉JQuery，足以理解它。这是我的代码：

HTML：

<div class="col-md-9">
    <div class="img-container">
    <img id="image" src="test.jpg" alt="Picture" runat="server" /><!-- ############# IMAGE ###########-->
    </div>
</div>
<div class="col-md-3">
    <div class="docs-preview clearfix">
    <div class="img-preview preview-lg"></div><!-- preview image-->
    </div>
</div>

和我的javascript / jquery在页面加载后运行：

function aspect() {
    var $image = $('#image');
    var $preview = $('img-preview');
    var asp = document.getElementById('hidAspectRatio').value;
    $image.cropper('setAspectRatio', asp);
    //$preview('resetPreview');
    return false;
}

注释掉的行是我认为我需要调用重置预览div的东西，但我无法弄清楚我应该调用什么。任何帮助非常感谢

Answer 1

不确定我是否完全理解您的问题，但您可以通过编程方式在js中设置纵横比，如下所示：

var options = {
    aspectRatio: 16 / 9, //can also use other values like 4/3, 1, 2/3
    preview: '.img-preview',
    crop: function (e) {
      $dataX.val(Math.round(e.x));
      $dataY.val(Math.round(e.y));
      $dataHeight.val(Math.round(e.height));
      $dataWidth.val(Math.round(e.width));
      $dataRotate.val(e.rotate);
      $dataScaleX.val(e.scaleX);
      $dataScaleY.val(e.scaleY);
    }
  };

此代码示例来自Cropper Demo Page中的main.js。

如何在fengyuanchen在Cropper上设置宽高比后重置预览

1 个答案: