ngEasyImageCrop | Angular Directive for Easy Server-Side Image Cropping.

ngEasyImageCrop module

ngEasyImageCrop

Stars : 10

Forks : 10

Created by Daymon Schroeder

Demo Download GitHub

Angular Easy Image Crop

Angular Directive for Easy Server-Side Image Cropping. Handles both original image and scaled image dimensions. With additional support for dynamic aspect-ratio cropping.

Demo

Options / Bindings

    <div 
        image-crop 
        aspect-ratio="'{int}/{int}'" 
        img-src="{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.

Javscript

Javascript plugin

Angular-js