Angular Directive for Easy Server-Side Image Cropping. Handles both original image and scaled image dimensions.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
easyImageCrop
README.md
example.html
exampleApp.js
image-crop.html
loaderBox.gif

README.md

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.