Angular Easy Image Crop

Angular directive for selecting an area within an image to crop. Useful for gathering rectangular data (represented as topLeftX, topLeftY, width, height).

Supports

• Original image dimensions
• Scaled image dimensions
• Dynamic/configurable aspect-ratio crop area

Options / Bindings

<div image-crop 
    aspect-ratio="'{int}/{int}'" 
    img-src="https://github.com/champloo11/ng-easy-image-crop/raw/master/{string}" 
    img-load="{string}"
    display-height="{int}" 
    display-width = "{int}"
    scaled-height="{int}" 
    scaled-width="{int}" 
    scaled-top="{int}" 
    scaled-left="{int}" 
    style="position:relative;">
</div>

• aspect-ratio

  • A string of two integers split by a '/'. Representing a ratio to enforce on the crop-box.

• img-src

  • The URL pointing to the image to be cropped.

• img-load

  • A load icon to display while the image is loading.

• display-height

  • The height of the crop-box inside of the directive. Not scaled to the original image height.

• display-width

  • The width of the crop-box inside of the directive. Not scaled to the original image width.

• scaled-height

  • The height of the crop-box relative to the original image dimensions. Scaled to original image dimensions

• scaled-width

  • The width of the crop-box relative to the original image dimensions. Scaled to original image dimensions

• scaled-top / scaled-left

  • The top-left point of the crop box. Relative to the original image dimensions.