ui 裁剪器裁剪高度和宽度答案

【问题标题】：Ui cropper crop height and widthui 裁剪器裁剪高度和宽度
【发布时间】：2018-11-02 06:12:48
【问题描述】：

我正在使用 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>

我想显示宽度（crop-width）的默认裁剪区域为 100%，高度（crop-height）为 100px。

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

我需要这样的：

但是，它的出现如下：(

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

【问题讨论】：

标签： javascript jquery angularjs crop

【解决方案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"然后它将默认选定区域用于该特定图像。

【讨论】：