Ui裁剪作物的高度和宽度

Question

我正在使用angualarjs。我想剪裁图像所以我使用了ui-cropper库。

关注：

https://codepen.io/Crackeraki/pen/zvWqJM

这是我的代码：

<div>Select an image file: <input type="file" id="fileInput" /></div>
    <div class="cropArea">
      <ui-cropper image="myImage" area-type="rectangle" aspect-ratio="1.7" result-image="myCroppedImage" result-image-size='{w: 340,h: 200}' init-max-area="true"></ui-cropper>
    </div>

    <div>Cropped Image:</div>
    <div><img ng-src="{{myCroppedImage}}" /></div>

我希望展示宽度（裁剪宽度）的默认裁剪区域为100％，高度（裁剪高度）为100px。

这里我使用的是一些宽高比1.7。但我希望任何图像的裁剪区域宽度为100％。

我需要这样：

但是，它如下所示:(

请建议我如何实现这一目标。

Answer 1

选择图像文件：

<div class="cropArea">
  <ui-cropper image="myImage" area-type="rectangle" aspect-ratio="0" result-image="myCroppedImage" result-image-size='{w: 340,h: 200}' init-max-area="true"></ui-cropper>
</div>

<div>Cropped Image:</div>
<div><img ng-src="{{myCroppedImage}}" /></div>

您需要将 aspect-ratio =“1.7” 更改为 aspect-ratio =“0” 然后它会将默认选定区域带到该特定图像。