如何裁剪具有不同高度/宽度尺寸的区域？ 与ngImgCrop

Question

I'm trying to crop not same height/width crop-area can I use rectangle crop-area.

<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>

I need set height/width like area-min-size="{100, 150}" result-image-size="{100, 150}"

Answer 1

As far as I can see - it is not possible, as it involves a more complex manipulation of the selector area (eg, it will need to resize in two dimensions independently).

There is an alternative however. Though it might be not as much of an eye candy as ngImgCrop, but it achieves what you need. [ http://grab.by/Cbpq ]

It is called: angular-image-crop .

Here is a JSBin sample .

You may need to play around with the following parameters data-width="", data-height="", dat-shape="square" before the result is satisfying:

<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, I found a modified version of ngImgCrop which supports rectangular crop as well as a fixed aspect ratio. Here I created a JsFiddle .

One could fiddle with the result-image-size="400" parameter to tailor the intermediate/resulting image size (this parameter defines the canvas size of an intermediate step). For the size of the final img , normal height and width of the image node can be changed.

Enjoy :)

Answer 3

have you tried this library https://github.com/vogloblinsky/ngImgCropExtended ? It probably extends the feature from ngImgCrop and supports area type like circle, square and rectangle