DarkroomJS

DarkroomJS is a JavaScript library which provides basic image editing tools in your browser, such as rotation or cropping. It is based on the awesome FabricJS library to handle images in HTML5 canvas.

UPDATE:

The project has been discontinued. As an alternative you should have a look at Pintura Image Editor.

Pintura supports every DarkroomJS features and more (resizing, free rotating, color adjustment, photo filters, annotating, etc), with a customisable UI, touch friendly and integrations with React or Vue.

[New] Try Pintura

Features: Enforce crop aspect ratio. Fast image uploads. Rotate, resize and flip. Overlay crop guides. Photo filter effects. Responsive and accessible.

Previous demo

View on Github

Why?

It's easy to get a javascript script to crop an image in a web page. But if your want more features like rotation or brightness adjustment, then you will have to do all of this yourself. No more jQuery plugins here. DarkroomJS allows you to make whatever you want with your images by using the power of the HTML5 canvas.

The concept

The library is designed to be easily extendable. The core script only transforms the target image to a canvas with a FabricJS instance, and creates an empty toolbar. All the features are then implemented in separate plugins.

.
├── darkroom.js
└── plugins
    ├── darkroom.crop.js
    ├── darkroom.history.js
    ├── darkroom.rotate.js
    └── darkroom.save.js

Each plugin is responsible for creating its own functionality. Buttons can easily be added to the toolbar and binded with those features.

Features

Currently, the implemented features are:

Crop: Crops the image by selecting a zone with your mouse. This supports several options like ratio and dimensions control (min/max).
Rotation: Adds two buttons to let you rotate hte image to the left or the right.
History: Allows to undo and redo any changes on the main image.
Save: Transform back the canvas into image. This is mainly a proof of concept to show how plugins work. This one only makes a few lines.

Contributing