Crop a picture and get a blob ready for upload
4 people use it
Author: 302860?v=2 standup75

cropme Angular Module

Drag and drop or select an image, crop it and get the blob, that you can use to upload wherever and however you want


  • width: (optional) width of the container. The image you want to crop will be reduced to this width. Omit the width to make the box fit the size of the parent container
  • height: (optional) height of the container. Default is 300
  • icon-class: (optional) css class of the icon to be set in the middle of the drop box
  • type: (optional) png or jpeg (might work with webm too, haven't tried it)
  • ratio: (optional) destination-height = ratio x destination-width. So you can either define ratio, or add a destination-height parameter, or none.
  • destination-width: (optional) target (cropped) picture width
  • destination-height: (optional) target (cropped) picture height. Cannot be set if ratio is set.
  • src: (optional) url of the image to preload (skips file selection)
  • send-original: (default: false) If you want to send the original file
  • send-cropped: (default: true) If you want to send the cropped image

Events Sent

cropme:done cropme:loaded

Events Received


More info here

Demo here!

comments powered by Disqus
This page was last updated almost 4 years ago.