Ui cropper 裁剪高度和宽度

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>

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

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

我需要这样的：

但是，它像下面这样来了:(

请建议我如何实现。

Answer 1

Select 图片文件：

<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" 然后它会将默认选定区域带到该特定图像。

Ui cropper 裁剪高度和宽度

Ui cropper crop height and width

javascript

jquery

crop

angularjs