Simple low level and opinionated cropper library.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Simple low level and opinionated cropper library.

  • Simple ES5 vanilla JavaScript, no dependencies, no bloat.
  • Straight to the point, almost no options.
  • Doesn't make any assumptions about how it's used and leave the power into your hands.



npm install rogneur --save



Create a new cropper instance bound to container.

  1. container: The container that will hold the cropper (should have a relative or absolute position)

Return the api as described below.


Use a canvas to crop the image according to its position/zoom.

Return the image as a data url string.


Move the image to given position.

  1. position: a position that can be one of: center. Also reset the zoom to make the image fit its container.

Return the api.


Load an image in the cropper. Note: an event is published when it the loading starts and ends, see subscribe.

  1. url: whatever fits the <img>'s src attribute (e.g an url, a data url, ...).

Return the api.


rogneur relies on the size of the container that is calculated once so if it changes, you'll need to update it.

Return the api.

.subscribe(event, callback)

Add a callback to be called when event occurs.

  1. event: the name of the event to subscribe to, one of: LOAD_START, LOAD_END.
  2. callback: a function to call when the event is published.


Used to set the internal rogneur instance's state. Can be used to update the position.x, position.y and zoom but should be used with caution otherwise. Note: some properties go through a transformer that ensure they match their min/max values.

See getState to have a look at the state's shape.

Return the api.


Return the rogneur instance's state.

  "position": {
    "x": Number,
    "y": Number
  "zoom": Number,
  "loading": Boolean,
  "minZoom": Number,
  "minX": Number,
  "maxX": Number,
  "minY": Number,
  "maxY": Number