Extensible image editing tool in your browser
Switch branches/tags
Clone or download
Pull request Compare This branch is 15 commits ahead of MattKetmo:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
demo
lib
.editorconfig
.gitignore
CHANGELOG.md
LICENSE
README.md
bower.json
gh-pages.sh
gulpfile.js
package.json

README.md

DarkroomCV

License MIT

DarkroomCV is a simple online image editor with some computer vision filters, written completely in javascript based on 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.

This library is extending it by adding more plugins for computer vision filters and algorithms.

Computer vision filters are done using the jsfeat library.

Demo

Try the online demo of the orginal DarkroomJS at http://mattketmo.github.io/darkroomjs

Try the online demo of this library at http://www.elgom3a.com/post/online-computer-vision-toolbox

Building

  • Install Node & npm.
  • Run npm install to build dependencies.
  • Run npm start to build the assets and start the demo webserver.

Usage

Simply instanciate a new Darkroom object with a reference to the image element:

<img src="some-image.jpg" id="target">
<script>
  new Darkroom('#target');
</script>

You can also pass some options:

new Darkroom('#target', {
  // Canvas initialization size
  minWidth: 100,
  minHeight: 100,
  maxWidth: 500,
  maxHeight: 500,

  // Plugins options
  plugins: {
    crop: {
      minHeight: 50,
      minWidth: 50,
      ratio: 1
    },
    save: false // disable plugin
  },

  // Post initialization method
  initialize: function() {
    // Active crop selection
    this.plugins['crop'].requireFocus();

    // Add custom listener
    this.addEventListener('core:transformation', function() { /* ... */ });
  }
});

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 it yourself. No more jQuery plugins here. It only uses the power of HTML5 canvas to make what ever you want with your image.

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.

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

Contributing

Run npm develop to build and watch the files while developing.

FAQ

How can I access the edited image?

In order to get the edited image data, you must ask the canvas for it. By doing so inside the callback of your choice (in this case save), you can assign the edited image data to wherever you please.

save: {
      callback: function() {
          this.darkroom.selfDestroy(); // Cleanup
          var newImage = dkrm.canvas.toDataURL();
          fileStorageLocation = newImage;
      }
  }

License

DarkroomJS is released under the MIT License. See the bundled LICENSE file for details.