Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including rogneur with all npm packages installed. Try it out:

var rogneur = require("rogneur")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

rogneur v0.0.3

Simple low level and opinionated cropper library.


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 much assumptions and leave the power in your hands.

  • Demo

  • Usage

  • Example

  • Documentation


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
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free