Question

我试图裁剪不同的高度/宽度裁剪区域，我可以使用矩形裁剪区域。

<div>Select an image file: <input type="file" id="fileInput" /></div>
    <div class="cropArea">
    <img-crop image="myImage" result-image="myCroppedImage" area-type="square" area-min-size="20" result-image-size="150"></img-crop>
     </div>
<div>Cropped Image:</div>
<div><img ng-src="{{myCroppedImage}}" /></div>

我需要设置高度/宽度，例如area-min-size =＆＃34; {100,150}＆＃34; result-image-size =＆＃34; {100,150}＆＃34;

Answer 1

据我所见 - 这是不可能的，因为它涉及对选择器区域的更复杂的操作（例如，它需要独立地在两个维度上调整大小）。

然而，有另一种选择。虽然它可能不像ngImgCrop那么多，但它实现了你所需要的。 [http://grab.by/Cbpq]

它被称为：angular-image-crop。

这是JSBin sample。

在结果满足之前，您可能需要使用以下参数data-width="", data-height="", dat-shape="square"：

<image-crop
     data-width="500"
     data-height="300"
     data-shape="square"
     data-step="imageCropStep"
     data-result="imageCropResult"
     ng-show="showImageCropper"
   ></image-crop>

Answer 2

@Bilegsaikhan，我发现了ngImgCrop的修改版本，它支持矩形裁剪以及固定的宽高比。 Here I created a JsFiddle。

可以使用result-image-size="400"参数来调整中间/结果图像大小（此参数定义中间步骤的画布大小）。对于最终img的大小，可以更改图像节点的正常height和width。

享受：）

Answer 3

你试过这个库https://github.com/vogloblinsky/ngImgCropExtended吗？它可能会扩展ngImgCrop的功能，并支持像圆形，方形和矩形

这样的区域类型

如何裁剪高度/宽度不同的区域？用ngImgCrop

3 个答案: