[ADD] web_widget_darkroom: Add o2m DarkroomJS widget

8 years ago · 1b073772e9
45 changed files with 3621 additions and 0 deletions
--- a/web_widget_darkroom/README.rst
+++ b/web_widget_darkroom/README.rst
@ -0,0 +1,95 @@
+.. image:: https://img.shields.io/badge/license-AGPL--3-blue.svg
+   :target: http://www.gnu.org/licenses/lgpl-3.0-standalone.html
+   :alt: License: LGPL-3
+
+======================
+Odoo DarkroomJS Widget
+======================
+
+This module provides a `DarkroomJS`_ web widget for use with images fields.
+
+.. _DarkroomJS: https://github.com/MattKetmo/darkroomjs 
+
+This widget will allow you to perform the following actions on images:
+
+ * Zoom
+ * Rotate
+ * Crop
+ * Step back in history client-side (before save)
+ 
+
+Usage
+=====
+
+To use this module, you need to:
+
+* Install web_widget_darkroom
+* Add the to any One2many image relation by using the `darkroom` widget. Options can be passed through to Darkroom using the `options` key::
+
+    <field name="image_id" widget="darkroom"
+                           options="{'minWidth': 100}" />
+
+The Odoo DarkroomJS widget passes options directly through to Darkroom, which are copied from the source below::
+
+  // Default options
+  defaults: {
+    // Canvas properties (dimension, ratio, color)
+    minWidth: null,
+    minHeight: null,
+    maxWidth: null,
+    maxHeight: null,
+    ratio: null,
+    backgroundColor: '#fff',
+
+    // Plugins options
+    plugins: {},
+
+    // Post-initialisation callback
+    initialize: function() { /* noop */ }
+  },
+
+
+
+Known Issues/Roadmap
+====================
+
+* Plugins are not able to be added without inheriting, then redefining the widget in the registry due to JS inheritance.
+  ** This is not scalable because there would need to be an explicit dependency chain in order to avoid registry overwrite.
+
+
+
+Bug Tracker
+===========
+
+Bugs are tracked on `GitHub Issues
+<https://github.com/OCA/{project_repo}/issues>`_. In case of trouble, please
+check there if your issue has already been reported. If you spotted it first,
+help us smashing it by providing a detailed and welcomed feedback.
+
+Credits
+=======
+
+Images
+------
+
+* Odoo Community Association: `Icon <https://github.com/OCA/maintainer-tools/blob/master/template/module/static/description/icon.svg>`_.
+
+Contributors
+------------
+
+* Dave Lasley <dave@laslabs.com>
+
+Maintainer
+----------
+
+.. image:: https://odoo-community.org/logo.png
+   :alt: Odoo Community Association
+   :target: https://odoo-community.org
+
+This module is maintained by the OCA.
+
+OCA, or the Odoo Community Association, is a nonprofit organization whose
+mission is to support the collaborative development of Odoo features and
+promote its widespread use.
+
+To contribute to this module, please visit https://odoo-community.org.
--- a/web_widget_darkroom/init.py
+++ b/web_widget_darkroom/init.py
@ -0,0 +1,3 @@
+# -*- coding: utf-8 -*-
+# Copyright 2016 LasLabs Inc.
+# License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html).
--- a/web_widget_darkroom/openerp.py
+++ b/web_widget_darkroom/openerp.py
@ -0,0 +1,28 @@
+# -*- coding: utf-8 -*-
+# Copyright 2016 LasLabs Inc.
+# License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html).
+
+{
+    "name": "Web Darkroom Image Widget",
+    "summary": "Widget provides a dynamic, editable canvas for use on any"
+    " One2many image field in backend form views.",
+    "version": "9.0.1.0.1",
+    "category": "Web",
+    "website": "https://laslabs.com/",
+    "author": "LasLabs, Odoo Community Association (OCA)",
+    "license": "LGPL-3",
+    "application": False,
+    "installable": True,
+    "depends": [
+        "web",
+    ],
+    "data": [
+        'views/assets.xml',
+    ],
+    'qweb': [
+        "static/src/xml/field_templates.xml",
+    ],
+    'demo': [
+        'demo/res_users.xml',
+    ]
+}
--- a/web_widget_darkroom/demo/res_users.xml
+++ b/web_widget_darkroom/demo/res_users.xml
@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!--
+    Copyright 2016 LasLabs Inc.
+    License LGPL-3 or later (http://www.gnu.org/licenses/lgpl.html).
+-->
+
+<openerp>
+    <data>
+        <record id="view_users_form" model="ir.ui.view">
+            <field name="name">res.users.form.darkroom</field>
+            <field name="model">res.users</field>
+            <field name="inherit_id" ref="base.view_users_form" />
+            <field name="arch" type="xml">
+                <xpath expr="//notebook" position="inside">
+                    <page string="Darkroom">
+                        <field name="image" widget="darkroom" />
+                    </page>
+                </xpath>
+            </field>
+        </record>
+    </data>
+</openerp>
+
--- a/web_widget_darkroom/static/description/icon.png
+++ b/web_widget_darkroom/static/description/icon.png
--- a/web_widget_darkroom/static/lib/darkroomjs/.editorconfig
+++ b/web_widget_darkroom/static/lib/darkroomjs/.editorconfig
@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = LF
+indent_style = space
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_size = 2
--- a/web_widget_darkroom/static/lib/darkroomjs/.gitignore
+++ b/web_widget_darkroom/static/lib/darkroomjs/.gitignore
@ -0,0 +1,5 @@
+/.sass-cache/
+/bower_components/
+/build/
+/node_modules/
+/docs/
--- a/web_widget_darkroom/static/lib/darkroomjs/CHANGELOG.md
+++ b/web_widget_darkroom/static/lib/darkroomjs/CHANGELOG.md
@ -0,0 +1,23 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+
+## Unreleased
+
+- Add type "button" to avoid html5 submit validation (#24)
+
+## 2.0.0 (2015-08-01)
+
+- Use of **Gulp** for the build process
+- Replace the webfont by **SVG symbols** (which are direclty included in the compiled javascript)
+- Ability to change **canvas ratio**
+- Original image is kept and changes are done on a clone
+
+## 1.0.x (2014)
+
+Initial release.
+
+- Create canvas with FabricJS from an image element
+- Plugins: Crop, History, Rotate, Save
+- Build process via Grunt
+- Build webfont from SVG files to display the icons
--- a/web_widget_darkroom/static/lib/darkroomjs/LICENSE
+++ b/web_widget_darkroom/static/lib/darkroomjs/LICENSE
@ -0,0 +1,18 @@
+Copyright (c) 2013 Matthieu Moquet
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--- a/web_widget_darkroom/static/lib/darkroomjs/README.md
+++ b/web_widget_darkroom/static/lib/darkroomjs/README.md
@ -0,0 +1,88 @@
+# 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](http://fabricjs.com/) library to handle images in HTML5 canvas.
+
+## Demo
+
+Try the online demo at [http://mattketmo.github.io/darkroomjs](http://mattketmo.github.io/darkroomjs/)
+
+The library is currently *work in progress*.
+I know there is some bug especially when resizing the crop zone.
+Feel free to fork the project or report issues on GitHub.
+All ideas are also welcome.
+
+## Building
+
+- Install [Node](http://nodejs.org/) & `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:
+
+```html
+<img src="some-image.jpg" id="target">
+<script>
+  new Darkroom('#target');
+</script>
+```
+
+You can also pass some options:
+
+```javascript
+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.
+
+## License
+
+DarkroomJS is released under the MIT License. See the [bundled LICENSE file](LICENSE)
+for details.
+
--- a/web_widget_darkroom/static/lib/darkroomjs/bower.json
+++ b/web_widget_darkroom/static/lib/darkroomjs/bower.json
@ -0,0 +1,31 @@
+{
+  "name": "darkroom",
+  "description": "Extensible image editing tool via HTML canvas",
+  "version": "2.0.0",
+  "homepage": "http://mattketmo.github.io/darkroomjs/",
+  "authors": [
+    "Matthieu Moquet <matthieu@moquet.net>"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "fabric": "~1.4.*"
+  },
+  "main": [
+    "build/darkroom.css",
+    "build/darkroom.js"
+  ],
+  "moduleType": [
+    "globals"
+  ],
+  "keywords": [
+    "image",
+    "canvas",
+    "crop"
+  ],
+  "ignore": [
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}
--- a/web_widget_darkroom/static/lib/darkroomjs/gh-pages.sh
+++ b/web_widget_darkroom/static/lib/darkroomjs/gh-pages.sh
@ -0,0 +1,21 @@
+#!/bin/bash
+
+# Update gh-pages branch
+git branch -D gh-pages
+git checkout -b gh-pages HEAD
+
+# Build assets
+rm -rf build
+gulp build --prod
+
+# Put build into demo folder
+rm demo/build
+cp -r build demo/build
+
+# Commit
+git add -f demo
+git commit -m "Build GH pages"
+
+# Push & reset
+git push origin `git subtree split --prefix demo HEAD`:gh-pages --force
+git checkout -
--- a/web_widget_darkroom/static/lib/darkroomjs/gulpfile.js
+++ b/web_widget_darkroom/static/lib/darkroomjs/gulpfile.js
@ -0,0 +1,112 @@
+var concat = require('gulp-concat')
+var connect = require('gulp-connect')
+var gulp = require('gulp')
+var gutil = require('gulp-util')
+var htmlJsStr = require('js-string-escape')
+var inject = require('gulp-inject')
+var plumber = require('gulp-plumber')
+var rimraf = require('rimraf')
+var sass = require('gulp-sass')
+var sourcemaps = require('gulp-sourcemaps')
+var spawn = require("child_process").spawn
+var streamqueue = require('streamqueue')
+var svgmin = require('gulp-svgmin')
+var svgstore = require('gulp-svgstore')
+var uglify = require('gulp-uglify')
+
+
+//
+// Variables
+//
+var srcDir = './lib';
+var distDir = './build';
+var isDebug = !gutil.env.prod;
+
+//
+// Default
+//
+gulp.task('default', ['build'], function() {
+  gulp.start('watch');
+});
+
+//
+// Clean
+//
+gulp.task('clean', function(cb) {
+  rimraf(distDir, cb);
+});
+
+//
+// Build
+//
+gulp.task('build', ['clean'], function() {
+  gulp.start('scripts', 'styles');
+});
+
+//
+// Watch
+//
+gulp.task('watch', ['server'], function() {
+  gulp.watch(srcDir + '/js/**/*.js', ['scripts']);
+
+  gulp.watch(srcDir + '/css/**/*.scss', ['styles']);
+});
+
+//
+// Server
+//
+gulp.task('server', function() {
+  connect.server({
+    root: './demo',
+    port: 2222,
+    livereload: false
+  });
+});
+
+//
+// Javascript
+//
+gulp.task('scripts', function () {
+  var svgs = gulp.src(srcDir + '/icons/*.svg')
+    .pipe(svgmin())
+    .pipe(svgstore({inlineSvg: true}))
+    // .pipe(gulp.dest(distDir));
+
+  function fileContents (filePath, file) {
+    return file.contents.toString();
+  }
+
+  var files = [
+    srcDir + '/js/core/bootstrap.js',
+    srcDir + '/js/core/darkroom.js',
+    srcDir + '/js/core/*.js',
+    // srcDir + '/js/plugins/*.js',
+    srcDir + '/js/plugins/darkroom.history.js',
+    srcDir + '/js/plugins/darkroom.rotate.js',
+    srcDir + '/js/plugins/darkroom.crop.js',
+    srcDir + '/js/plugins/darkroom.save.js',
+  ];
+
+  gulp.src(files)
+    .pipe(plumber())
+    .pipe(isDebug ? sourcemaps.init() : gutil.noop())
+      .pipe(concat('darkroom.js', {newLine: ';'}))
+      .pipe(inject(svgs, { transform: fileContents }))
+      .pipe(isDebug ? gutil.noop() : uglify({mangle: false}))
+    .pipe(isDebug ? sourcemaps.write() : gutil.noop())
+    .pipe(gulp.dest(distDir))
+})
+
+//
+// Stylesheet
+//
+gulp.task('styles', function () {
+  gulp.src(srcDir + '/css/darkroom.scss')
+    .pipe(plumber())
+    .pipe(isDebug ? sourcemaps.init() : gutil.noop())
+      .pipe(sass({
+        outputStyle: isDebug ? 'nested' : 'compressed'
+      }))
+    .pipe(isDebug ? sourcemaps.write() : gutil.noop())
+    .pipe(gulp.dest(distDir))
+})
--- a/web_widget_darkroom/static/lib/darkroomjs/lib/css/_layout.scss
+++ b/web_widget_darkroom/static/lib/darkroomjs/lib/css/_layout.scss
@ -0,0 +1,12 @@
+.darkroom-container {
+  position: relative;
+}
+
+.darkroom-image-container {
+  top: 0;
+  left: 0;
+}
+
+.darkroom-image-container img {
+  // display: none;
+}
--- a/web_widget_darkroom/static/lib/darkroomjs/lib/css/_toolbar.scss
+++ b/web_widget_darkroom/static/lib/darkroomjs/lib/css/_toolbar.scss
@ -0,0 +1,99 @@
+//
+// Toolbar
+//
+.darkroom-toolbar {
+  display: block;
+  position: absolute;
+  top: -45px;
+  left: 0;
+  background: #444;
+  height: 40px;
+  min-width: 40px;
+  z-index: 99;
+  border-radius: 2px;
+  white-space: nowrap;
+  padding: 0 5px;
+
+  // Triangle
+  &:before {
+    content: "";
+    position: absolute;
+    bottom: -7px;
+    left: 20px;
+    width: 0;
+    height: 0;
+    border-left: 7px solid transparent;
+    border-right: 7px solid transparent;
+    border-top: 7px solid #444;
+  }
+}
+
+//
+// Button Group
+//
+.darkroom-button-group {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  // border-right: 1px solid #777;
+
+  &:last-child {
+    border-right: none;
+  }
+}
+
+
+//
+// Button
+//
+.darkroom-button {
+  box-sizing: border-box;
+  background: transparent;
+  border: none;
+  outline: none;
+  padding: 2px 0 0 0;
+  width: 40px;
+  height: 40px;
+
+  &:hover {
+    cursor: pointer;
+    background: #555;
+  }
+  &:active {
+    cursor: pointer;
+    background: #333;
+  }
+
+  &:disabled .darkroom-icon {
+    fill: #666;
+  }
+  &:disabled:hover {
+    cursor: default;
+    /*cursor: not-allowed;*/
+    background: transparent;
+  }
+  &.darkroom-button-active .darkroom-icon {
+    fill: #33b5e5;
+  }
+  &.darkroom-button-hidden {
+    display: none;
+  }
+  &.darkroom-button-success .darkroom-icon {
+    fill: #99cc00;
+  }
+  &.darkroom-button-warning .darkroom-icon {
+    fill: #FFBB33;
+  }
+  &.darkroom-button-danger .darkroom-icon {
+    fill: #FF4444;
+  }
+}
+
+//
+// Icon
+//
+.darkroom-icon {
+  width: 24px;
+  height: 24px;
+  fill: #fff;
+}
--- a/web_widget_darkroom/static/lib/darkroomjs/lib/css/darkroom.scss
+++ b/web_widget_darkroom/static/lib/darkroomjs/lib/css/darkroom.scss
@ -0,0 +1,2 @@
+@import 'layout';
+@import 'toolbar';
--- a/web_widget_darkroom/static/lib/darkroomjs/lib/icons/close.svg
+++ b/web_widget_darkroom/static/lib/darkroomjs/lib/icons/close.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"/>
+    <path d="M0 0h24v24h-24z" fill="none"/>
+</svg>
--- a/web_widget_darkroom/static/lib/darkroomjs/lib/icons/crop.svg
+++ b/web_widget_darkroom/static/lib/darkroomjs/lib/icons/crop.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M0 0h24v24h-24z" fill="none"/>
+    <path d="M17 15h2v-8c0-1.1-.9-2-2-2h-8v2h8v8zm-10 2v-16h-2v4h-4v2h4v10c0 1.1.9 2 2 2h10v4h2v-4h4v-2h-16z"/>
+</svg>
--- a/web_widget_darkroom/static/lib/darkroomjs/lib/icons/done.svg
+++ b/web_widget_darkroom/static/lib/darkroomjs/lib/icons/done.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M0 0h24v24h-24z" fill="none"/>
+    <path d="M9 16.17l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41z"/>
+</svg>
--- a/web_widget_darkroom/static/lib/darkroomjs/lib/icons/redo.svg
+++ b/web_widget_darkroom/static/lib/darkroomjs/lib/icons/redo.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M0 0h24v24h-24z" fill="none"/>
+    <path d="M18.4 10.6c-1.85-1.61-4.25-2.6-6.9-2.6-4.65 0-8.58 3.03-9.96 7.22l2.36.78c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88l-3.62 3.62h9v-9l-3.6 3.6z"/>
+</svg>
--- a/web_widget_darkroom/static/lib/darkroomjs/lib/icons/rotate-left.svg
+++ b/web_widget_darkroom/static/lib/darkroomjs/lib/icons/rotate-left.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M0 0h24v24h-24z" fill="none"/>
+    <path d="M7.11 8.53l-1.41-1.42c-.9 1.16-1.46 2.5-1.63 3.89h2.02c.14-.87.49-1.72 1.02-2.47zm-1.02 4.47h-2.02c.17 1.39.72 2.73 1.62 3.89l1.41-1.42c-.52-.75-.87-1.59-1.01-2.47zm1.01 5.32c1.16.9 2.51 1.44 3.9 1.61v-2.03c-.87-.15-1.71-.49-2.46-1.03l-1.44 1.45zm5.9-14.25v-3.07l-4.55 4.55 4.55 4.45v-3.91c2.84.48 5 2.94 5 5.91s-2.16 5.43-5 5.91v2.02c3.95-.49 7-3.85 7-7.93s-3.05-7.44-7-7.93z"/>
+</svg>
--- a/web_widget_darkroom/static/lib/darkroomjs/lib/icons/rotate-right.svg
+++ b/web_widget_darkroom/static/lib/darkroomjs/lib/icons/rotate-right.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M0 0h24v24h-24z" fill="none"/>
+    <path d="M15.55 5.55l-4.55-4.55v3.07c-3.94.49-7 3.85-7 7.93s3.05 7.44 7 7.93v-2.02c-2.84-.48-5-2.94-5-5.91s2.16-5.43 5-5.91v3.91l4.55-4.45zm4.38 5.45c-.17-1.39-.72-2.73-1.62-3.89l-1.42 1.42c.54.75.88 1.6 1.02 2.47h2.02zm-6.93 6.9v2.02c1.39-.17 2.74-.71 3.9-1.61l-1.44-1.44c-.75.54-1.59.89-2.46 1.03zm3.89-2.42l1.42 1.41c.9-1.16 1.45-2.5 1.62-3.89h-2.02c-.14.87-.48 1.72-1.02 2.48z"/>
+</svg>
--- a/web_widget_darkroom/static/lib/darkroomjs/lib/icons/save.svg
+++ b/web_widget_darkroom/static/lib/darkroomjs/lib/icons/save.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M0 0h24v24h-24z" fill="none"/>
+    <path d="M17 3h-12c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-12l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10h-10v-4h10v4z"/>
+</svg>
--- a/web_widget_darkroom/static/lib/darkroomjs/lib/icons/undo.svg
+++ b/web_widget_darkroom/static/lib/darkroomjs/lib/icons/undo.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M0 0h24v24h-24z" fill="none"/>
+    <path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6l-3.6-3.6v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78c-1.39-4.19-5.32-7.22-9.97-7.22z"/>
+</svg>
--- a/web_widget_darkroom/static/lib/darkroomjs/lib/js/core/bootstrap.js
+++ b/web_widget_darkroom/static/lib/darkroomjs/lib/js/core/bootstrap.js
@ -0,0 +1,14 @@
+(function() {
+'use strict';
+
+// Inject SVG icons into the DOM
+var element = document.createElement('div');
+element.id = 'darkroom-icons';
+element.style.height = 0;
+element.style.width = 0;
+element.style.position = 'absolute';
+element.style.visibility = 'hidden';
+element.innerHTML = '<!-- inject:svg --><!-- endinject -->';
+document.body.appendChild(element);
+
+})();
--- a/web_widget_darkroom/static/lib/darkroomjs/lib/js/core/darkroom.js
+++ b/web_widget_darkroom/static/lib/darkroomjs/lib/js/core/darkroom.js
@ -0,0 +1,354 @@
+(function() {
+'use strict';
+
+window.Darkroom = Darkroom;
+
+// Core object of DarkroomJS.
+// Basically it's a single object, instanciable via an element
+// (it could be a CSS selector or a DOM element), some custom options,
+// and a list of plugin objects (or none to use default ones).
+function Darkroom(element, options, plugins) {
+  return this.constructor(element, options, plugins);
+}
+
+// Create an empty list of plugin objects, which will be filled by
+// other plugin scripts. This is the default plugin list if none is
+// specified in Darkroom'ss constructor.
+Darkroom.plugins = [];
+
+Darkroom.prototype = {
+  // Refenrece to the main container element
+  containerElement: null,
+
+  // Reference to the Fabric canvas object
+  canvas: null,
+
+  // Reference to the Fabric image object
+  image: null,
+
+  // Reference to the Fabric source canvas object
+  sourceCanvas: null,
+
+  // Reference to the Fabric source image object
+  sourceImage: null,
+
+  // Track of the original image element
+  originalImageElement: null,
+
+  // Stack of transformations to apply to the image source
+  transformations: [],
+
+  // Default options
+  defaults: {
+    // Canvas properties (dimension, ratio, color)
+    minWidth: null,
+    minHeight: null,
+    maxWidth: null,
+    maxHeight: null,
+    ratio: null,
+    backgroundColor: '#fff',
+
+    // Plugins options
+    plugins: {},
+
+    // Post-initialisation callback
+    initialize: function() { /* noop */ }
+  },
+
+  // List of the instancied plugins
+  plugins: {},
+
+  // This options are a merge between `defaults` and the options passed
+  // through the constructor
+  options: {},
+
+  constructor: function(element, options, plugins) {
+    this.options = Darkroom.Utils.extend(options, this.defaults);
+
+    if (typeof element === 'string')
+      element = document.querySelector(element);
+    if (null === element)
+      return;
+
+    var image = new Image();
+    var parent = element.parentElement;
+    image.onload = function() {
+      // Initialize the DOM/Fabric elements
+      this._initializeDOM(element, parent);
+      this._initializeImage();
+
+      // Then initialize the plugins
+      this._initializePlugins(Darkroom.plugins);
+
+      // Public method to adjust image according to the canvas
+      this.refresh(function() {
+        // Execute a custom callback after initialization
+        this.options.initialize.bind(this).call();
+      }.bind(this));
+
+    }.bind(this)
+
+    //image.crossOrigin = 'anonymous';
+    image.src = element.src;
+  },
+
+  selfDestroy: function() {
+    var container = this.containerElement;
+    var image = new Image();
+    image.onload = function() {
+      container.parentNode.replaceChild(image, container);
+    }
+
+    image.src = this.sourceImage.toDataURL();
+  },
+
+  // Add ability to attach event listener on the core object.
+  // It uses the canvas element to process events.
+  addEventListener: function(eventName, callback) {
+    var el = this.canvas.getElement();
+    if (el.addEventListener){
+      el.addEventListener(eventName, callback);
+    } else if (el.attachEvent) {
+      el.attachEvent('on' + eventName, callback);
+    }
+  },
+
+  dispatchEvent: function(eventName) {
+    // Use the old way of creating event to be IE compatible
+    // See https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events
+    var event = document.createEvent('Event');
+    event.initEvent(eventName, true, true);
+
+    this.canvas.getElement().dispatchEvent(event);
+  },
+
+  // Adjust image & canvas dimension according to min/max width/height
+  // and ratio specified in the options.
+  // This method should be called after each image transformation.
+  refresh: function(next) {
+    var clone = new Image();
+    clone.onload = function() {
+      this._replaceCurrentImage(new fabric.Image(clone));
+
+      if (next) next();
+    }.bind(this);
+    clone.src = this.sourceImage.toDataURL();
+  },
+
+  _replaceCurrentImage: function(newImage) {
+    if (this.image) {
+      this.image.remove();
+    }
+
+    this.image = newImage;
+    this.image.selectable = false;
+
+    // Adjust width or height according to specified ratio
+    var viewport = Darkroom.Utils.computeImageViewPort(this.image);
+    var canvasWidth = viewport.width;
+    var canvasHeight = viewport.height;
+
+    if (null !== this.options.ratio) {
+      var canvasRatio = +this.options.ratio;
+      var currentRatio = canvasWidth / canvasHeight;
+
+      if (currentRatio > canvasRatio) {
+        canvasHeight = canvasWidth / canvasRatio;
+      } else if (currentRatio < canvasRatio) {
+        canvasWidth = canvasHeight * canvasRatio;
+      }
+    }
+
+    // Then scale the image to fit into dimension limits
+    var scaleMin = 1;
+    var scaleMax = 1;
+    var scaleX = 1;
+    var scaleY = 1;
+
+    if (null !== this.options.maxWidth && this.options.maxWidth < canvasWidth) {
+      scaleX =  this.options.maxWidth / canvasWidth;
+    }
+    if (null !== this.options.maxHeight && this.options.maxHeight < canvasHeight) {
+      scaleY =  this.options.maxHeight / canvasHeight;
+    }
+    scaleMin = Math.min(scaleX, scaleY);
+
+    scaleX = 1;
+    scaleY = 1;
+    if (null !== this.options.minWidth && this.options.minWidth > canvasWidth) {
+      scaleX =  this.options.minWidth / canvasWidth;
+    }
+    if (null !== this.options.minHeight && this.options.minHeight > canvasHeight) {
+      scaleY =  this.options.minHeight / canvasHeight;
+    }
+    scaleMax = Math.max(scaleX, scaleY);
+
+    var scale = scaleMax * scaleMin; // one should be equals to 1
+
+    canvasWidth *= scale;
+    canvasHeight *= scale;
+
+    // Finally place the image in the center of the canvas
+    this.image.setScaleX(1 * scale);
+    this.image.setScaleY(1 * scale);
+    this.canvas.add(this.image);
+    this.canvas.setWidth(canvasWidth);
+    this.canvas.setHeight(canvasHeight);
+    this.canvas.centerObject(this.image);
+    this.image.setCoords();
+  },
+
+  // Apply the transformation on the current image and save it in the
+  // transformations stack (in order to reconstitute the previous states
+  // of the image).
+  applyTransformation: function(transformation) {
+    this.transformations.push(transformation);
+
+    transformation.applyTransformation(
+      this.sourceCanvas,
+      this.sourceImage,
+      this._postTransformation.bind(this)
+    );
+  },
+
+  _postTransformation: function(newImage) {
+    if (newImage)
+      this.sourceImage = newImage;
+
+    this.refresh(function() {
+      this.dispatchEvent('core:transformation');
+    }.bind(this));
+  },
+
+  // Initialize image from original element plus re-apply every
+  // transformations.
+  reinitializeImage: function() {
+    this.sourceImage.remove();
+    this._initializeImage();
+    this._popTransformation(this.transformations.slice())
+  },
+
+  _popTransformation: function(transformations) {
+    if (0 === transformations.length) {
+      this.dispatchEvent('core:reinitialized');
+      this.refresh();
+      return;
+    }
+
+    var transformation = transformations.shift();
+
+    var next = function(newImage) {
+      if (newImage) this.sourceImage = newImage;
+      this._popTransformation(transformations)
+    };
+
+    transformation.applyTransformation(
+      this.sourceCanvas,
+      this.sourceImage,
+      next.bind(this)
+    );
+  },
+
+  // Create the DOM elements and instanciate the Fabric canvas.
+  // The image element is replaced by a new `div` element.
+  // However the original image is re-injected in order to keep a trace of it.
+  _initializeDOM: function(imageElement) {
+    // Container
+    var mainContainerElement = document.createElement('div');
+    mainContainerElement.className = 'darkroom-container';
+
+    // Toolbar
+    var toolbarElement = document.createElement('div');
+    toolbarElement.className = 'darkroom-toolbar';
+    mainContainerElement.appendChild(toolbarElement);
+
+    // Viewport canvas
+    var canvasContainerElement = document.createElement('div');
+    canvasContainerElement.className = 'darkroom-image-container';
+    var canvasElement = document.createElement('canvas');
+    canvasContainerElement.appendChild(canvasElement);
+    mainContainerElement.appendChild(canvasContainerElement);
+
+    // Source canvas
+    var sourceCanvasContainerElement = document.createElement('div');
+    sourceCanvasContainerElement.className = 'darkroom-source-container';
+    sourceCanvasContainerElement.style.display = 'none';
+    var sourceCanvasElement = document.createElement('canvas');
+    sourceCanvasContainerElement.appendChild(sourceCanvasElement);
+    mainContainerElement.appendChild(sourceCanvasContainerElement);
+
+    // Original image
+    imageElement.parentNode.replaceChild(mainContainerElement, imageElement);
+    imageElement.style.display = 'none';
+    mainContainerElement.appendChild(imageElement);
+
+    // Instanciate object from elements
+    this.containerElement = mainContainerElement;
+    this.originalImageElement = imageElement;
+
+    this.toolbar = new Darkroom.UI.Toolbar(toolbarElement);
+
+    this.canvas = new fabric.Canvas(canvasElement, {
+      selection: false,
+      backgroundColor: this.options.backgroundColor
+    });
+
+    this.sourceCanvas = new fabric.Canvas(sourceCanvasElement, {
+      selection: false,
+      backgroundColor: this.options.backgroundColor
+    });
+  },
+
+  // Instanciate the Fabric image object.
+  // The image is created as a static element with no control,
+  // then it is add in the Fabric canvas object.
+  _initializeImage: function() {
+    this.sourceImage = new fabric.Image(this.originalImageElement, {
+      // Some options to make the image static
+      selectable: false,
+      evented: false,
+      lockMovementX: true,
+      lockMovementY: true,
+      lockRotation: true,
+      lockScalingX: true,
+      lockScalingY: true,
+      lockUniScaling: true,
+      hasControls: false,
+      hasBorders: false,
+    });
+
+    this.sourceCanvas.add(this.sourceImage);
+
+    // Adjust width or height according to specified ratio
+    var viewport = Darkroom.Utils.computeImageViewPort(this.sourceImage);
+    var canvasWidth = viewport.width;
+    var canvasHeight = viewport.height;
+
+    this.sourceCanvas.setWidth(canvasWidth);
+    this.sourceCanvas.setHeight(canvasHeight);
+    this.sourceCanvas.centerObject(this.sourceImage);
+    this.sourceImage.setCoords();
+  },
+
+  // Initialize every plugins.
+  // Note that plugins are instanciated in the same order than they
+  // are declared in the parameter object.
+  _initializePlugins: function(plugins) {
+    for (var name in plugins) {
+      var plugin = plugins[name];
+      var options = this.options.plugins[name];
+
+      // Setting false into the plugin options will disable the plugin
+      if (options === false)
+        continue;
+
+      // Avoid any issues with _proto_
+      if (!plugins.hasOwnProperty(name))
+        continue;
+
+      this.plugins[name] = new plugin(this, options);
+    }
+  },
+}
+
+})();
--- a/web_widget_darkroom/static/lib/darkroomjs/lib/js/core/plugin.js
+++ b/web_widget_darkroom/static/lib/darkroomjs/lib/js/core/plugin.js
@ -0,0 +1,43 @@
+(function() {
+'use strict';
+
+Darkroom.Plugin = Plugin;
+
+// Define a plugin object. This is the (abstract) parent class which
+// has to be extended for each plugin.
+function Plugin(darkroom, options) {
+  this.darkroom = darkroom;
+  this.options = Darkroom.Utils.extend(options, this.defaults);
+  this.initialize();
+}
+
+Plugin.prototype = {
+  defaults: {},
+  initialize: function() { }
+}
+
+// Inspired by Backbone.js extend capability.
+Plugin.extend = function(protoProps) {
+  var parent = this;
+  var child;
+
+  if (protoProps && protoProps.hasOwnProperty('constructor')) {
+    child = protoProps.constructor;
+  } else {
+    child = function(){ return parent.apply(this, arguments); };
+  }
+
+  Darkroom.Utils.extend(child, parent);
+
+  var Surrogate = function(){ this.constructor = child; };
+  Surrogate.prototype = parent.prototype;
+  child.prototype = new Surrogate;
+
+  if (protoProps) Darkroom.Utils.extend(child.prototype, protoProps);
+
+  child.__super__ = parent.prototype;
+
+  return child;
+}
+
+})();
--- a/web_widget_darkroom/static/lib/darkroomjs/lib/js/core/transformation.js
+++ b/web_widget_darkroom/static/lib/darkroomjs/lib/js/core/transformation.js
@ -0,0 +1,38 @@
+(function() {
+'use strict';
+
+Darkroom.Transformation = Transformation;
+
+function Transformation(options) {
+  this.options = options;
+}
+
+Transformation.prototype = {
+  applyTransformation: function(image) { /* no-op */  }
+}
+
+// Inspired by Backbone.js extend capability.
+Transformation.extend = function(protoProps) {
+  var parent = this;
+  var child;
+
+  if (protoProps && protoProps.hasOwnProperty('constructor')) {
+    child = protoProps.constructor;
+  } else {
+    child = function(){ return parent.apply(this, arguments); };
+  }
+
+  Darkroom.Utils.extend(child, parent);
+
+  var Surrogate = function(){ this.constructor = child; };
+  Surrogate.prototype = parent.prototype;
+  child.prototype = new Surrogate;
+
+  if (protoProps) Darkroom.Utils.extend(child.prototype, protoProps);
+
+  child.__super__ = parent.prototype;
+
+  return child;
+}
+
+})();
--- a/web_widget_darkroom/static/lib/darkroomjs/lib/js/core/ui.js
+++ b/web_widget_darkroom/static/lib/darkroomjs/lib/js/core/ui.js
@ -0,0 +1,91 @@
+(function() {
+'use strict';
+
+Darkroom.UI = {
+  Toolbar: Toolbar,
+  ButtonGroup: ButtonGroup,
+  Button: Button,
+};
+
+// Toolbar object.
+function Toolbar(element) {
+  this.element = element;
+}
+
+Toolbar.prototype = {
+  createButtonGroup: function(options) {
+    var buttonGroup = document.createElement('div');
+    buttonGroup.className = 'darkroom-button-group';
+    this.element.appendChild(buttonGroup);
+
+    return new ButtonGroup(buttonGroup);
+  }
+};
+
+// ButtonGroup object.
+function ButtonGroup(element) {
+  this.element = element;
+}
+
+ButtonGroup.prototype = {
+  createButton: function(options) {
+    var defaults = {
+      image: 'help',
+      type: 'default',
+      group: 'default',
+      hide: false,
+      disabled: false
+    };
+
+    options = Darkroom.Utils.extend(options, defaults);
+
+    var buttonElement = document.createElement('button');
+    buttonElement.type = 'button';
+    buttonElement.className = 'darkroom-button darkroom-button-' + options.type;
+    buttonElement.innerHTML = '<svg class="darkroom-icon"><use xlink:href="#' + options.image + '" /></svg>';
+    this.element.appendChild(buttonElement);
+
+    var button = new Button(buttonElement);
+    button.hide(options.hide);
+    button.disable(options.disabled);
+
+    return button;
+  }
+}
+
+// Button object.
+function Button(element) {
+  this.element = element;
+}
+
+Button.prototype = {
+  addEventListener: function(eventName, listener) {
+    if (this.element.addEventListener){
+      this.element.addEventListener(eventName, listener);
+    } else if (this.element.attachEvent) {
+      this.element.attachEvent('on' + eventName, listener);
+    }
+  },
+  removeEventListener: function(eventName, listener) {
+    if (this.element.removeEventListener){
+      this.element.removeEventListener(eventName, listener);
+    }
+  },
+  active: function(value) {
+    if (value)
+      this.element.classList.add('darkroom-button-active');
+    else
+      this.element.classList.remove('darkroom-button-active');
+  },
+  hide: function(value) {
+    if (value)
+      this.element.classList.add('darkroom-button-hidden');
+    else
+      this.element.classList.remove('darkroom-button-hidden');
+  },
+  disable: function(value) {
+    this.element.disabled = (value) ? true : false;
+  }
+};
+
+})();
--- a/web_widget_darkroom/static/lib/darkroomjs/lib/js/core/utils.js
+++ b/web_widget_darkroom/static/lib/darkroomjs/lib/js/core/utils.js
@ -0,0 +1,31 @@
+(function() {
+'use strict';
+
+Darkroom.Utils = {
+  extend: extend,
+  computeImageViewPort: computeImageViewPort,
+};
+
+
+// Utility method to easily extend objects.
+function extend(b, a) {
+  var prop;
+  if (b === undefined) {
+    return a;
+  }
+  for (prop in a) {
+    if (a.hasOwnProperty(prop) && b.hasOwnProperty(prop) === false) {
+      b[prop] = a[prop];
+    }
+  }
+  return b;
+}
+
+function computeImageViewPort(image) {
+  return {
+    height: Math.abs(image.getWidth() * (Math.sin(image.getAngle() * Math.PI/180))) + Math.abs(image.getHeight() * (Math.cos(image.getAngle() * Math.PI/180))),
+    width: Math.abs(image.getHeight() * (Math.sin(image.getAngle() * Math.PI/180))) + Math.abs(image.getWidth() * (Math.cos(image.getAngle() * Math.PI/180))),
+  }
+}
+
+})();
--- a/web_widget_darkroom/static/lib/darkroomjs/lib/js/plugins/darkroom.crop.js
+++ b/web_widget_darkroom/static/lib/darkroomjs/lib/js/plugins/darkroom.crop.js
@ -0,0 +1,669 @@
+(function() {
+'use strict';
+
+var Crop = Darkroom.Transformation.extend({
+  applyTransformation: function(canvas, image, next) {
+    // Snapshot the image delimited by the crop zone
+    var snapshot = new Image();
+    snapshot.onload = function() {
+      // Validate image
+      if (height < 1 || width < 1)
+        return;
+
+      var imgInstance = new fabric.Image(this, {
+        // options to make the image static
+        selectable: false,
+        evented: false,
+        lockMovementX: true,
+        lockMovementY: true,
+        lockRotation: true,
+        lockScalingX: true,
+        lockScalingY: true,
+        lockUniScaling: true,
+        hasControls: false,
+        hasBorders: false
+      });
+
+      var width = this.width;
+      var height = this.height;
+
+      // Update canvas size
+      canvas.setWidth(width);
+      canvas.setHeight(height);
+
+      // Add image
+      image.remove();
+      canvas.add(imgInstance);
+
+      next(imgInstance);
+    };
+
+    var viewport = Darkroom.Utils.computeImageViewPort(image);
+    var imageWidth = viewport.width;
+    var imageHeight = viewport.height;
+
+    var left = this.options.left * imageWidth;
+    var top = this.options.top * imageHeight;
+    var width = Math.min(this.options.width * imageWidth, imageWidth - left);
+    var height = Math.min(this.options.height * imageHeight, imageHeight - top);
+
+    snapshot.src = canvas.toDataURL({
+      left: left,
+      top: top,
+      width: width,
+      height: height,
+    });
+  }
+});
+
+var CropZone = fabric.util.createClass(fabric.Rect, {
+  _render: function(ctx) {
+    this.callSuper('_render', ctx);
+
+    var canvas = ctx.canvas;
+    var dashWidth = 7;
+
+    // Set original scale
+    var flipX = this.flipX ? -1 : 1;
+    var flipY = this.flipY ? -1 : 1;
+    var scaleX = flipX / this.scaleX;
+    var scaleY = flipY / this.scaleY;
+
+    ctx.scale(scaleX, scaleY);
+
+    // Overlay rendering
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+    this._renderOverlay(ctx);
+
+    // Set dashed borders
+    if (ctx.setLineDash !== undefined)
+      ctx.setLineDash([dashWidth, dashWidth]);
+    else if (ctx.mozDash !== undefined)
+      ctx.mozDash = [dashWidth, dashWidth];
+
+    // First lines rendering with black
+    ctx.strokeStyle = 'rgba(0, 0, 0, 0.2)';
+    this._renderBorders(ctx);
+    this._renderGrid(ctx);
+
+    // Re render lines in white
+    ctx.lineDashOffset = dashWidth;
+    ctx.strokeStyle = 'rgba(255, 255, 255, 0.4)';
+    this._renderBorders(ctx);
+    this._renderGrid(ctx);
+
+    // Reset scale
+    ctx.scale(1/scaleX, 1/scaleY);
+  },
+
+  _renderOverlay: function(ctx) {
+    var canvas = ctx.canvas;
+    var borderOffset = 0;
+
+    //
+    //    x0    x1        x2      x3
+    // y0 +------------------------+
+    //    |\\\\\\\\\\\\\\\\\\\\\\\\|
+    //    |\\\\\\\\\\\\\\\\\\\\\\\\|
+    // y1 +------+---------+-------+
+    //    |\\\\\\|         |\\\\\\\|
+    //    |\\\\\\|    0    |\\\\\\\|
+    //    |\\\\\\|         |\\\\\\\|
+    // y2 +------+---------+-------+
+    //    |\\\\\\\\\\\\\\\\\\\\\\\\|
+    //    |\\\\\\\\\\\\\\\\\\\\\\\\|
+    // y3 +------------------------+
+    //
+
+    var x0 = Math.ceil(-this.getWidth() / 2 - this.getLeft());
+    var x1 = Math.ceil(-this.getWidth() / 2);
+    var x2 = Math.ceil(this.getWidth() / 2);
+    var x3 = Math.ceil(this.getWidth() / 2 + (canvas.width - this.getWidth() - this.getLeft()));
+
+    var y0 = Math.ceil(-this.getHeight() / 2 - this.getTop());
+    var y1 = Math.ceil(-this.getHeight() / 2);
+    var y2 = Math.ceil(this.getHeight() / 2);
+    var y3 = Math.ceil(this.getHeight() / 2 + (canvas.height - this.getHeight() - this.getTop()));
+
+    // Upper rect
+    ctx.fillRect(x0, y0, x3 - x0, y1 - y0 + borderOffset);
+
+    // Left rect
+    ctx.fillRect(x0, y1, x1 - x0, y2 - y1 + borderOffset);
+
+    // Right rect
+    ctx.fillRect(x2, y1, x3 - x2, y2 - y1 + borderOffset);
+
+    // Down rect
+    ctx.fillRect(x0, y2, x3 - x0, y3 - y2);
+  },
+
+  _renderBorders: function(ctx) {
+    ctx.beginPath();
+    ctx.moveTo(-this.getWidth()/2, -this.getHeight()/2); // upper left
+    ctx.lineTo(this.getWidth()/2, -this.getHeight()/2); // upper right
+    ctx.lineTo(this.getWidth()/2, this.getHeight()/2); // down right
+    ctx.lineTo(-this.getWidth()/2, this.getHeight()/2); // down left
+    ctx.lineTo(-this.getWidth()/2, -this.getHeight()/2); // upper left
+    ctx.stroke();
+  },
+
+  _renderGrid: function(ctx) {
+    // Vertical lines
+    ctx.beginPath();
+    ctx.moveTo(-this.getWidth()/2 + 1/3 * this.getWidth(), -this.getHeight()/2);
+    ctx.lineTo(-this.getWidth()/2 + 1/3 * this.getWidth(), this.getHeight()/2);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(-this.getWidth()/2 + 2/3 * this.getWidth(), -this.getHeight()/2);
+    ctx.lineTo(-this.getWidth()/2 + 2/3 * this.getWidth(), this.getHeight()/2);
+    ctx.stroke();
+    // Horizontal lines
+    ctx.beginPath();
+    ctx.moveTo(-this.getWidth()/2, -this.getHeight()/2 + 1/3 * this.getHeight());
+    ctx.lineTo(this.getWidth()/2, -this.getHeight()/2 + 1/3 * this.getHeight());
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(-this.getWidth()/2, -this.getHeight()/2 + 2/3 * this.getHeight());
+    ctx.lineTo(this.getWidth()/2, -this.getHeight()/2 + 2/3 * this.getHeight());
+    ctx.stroke();
+  }
+});
+
+Darkroom.plugins['crop'] = Darkroom.Plugin.extend({
+  // Init point
+  startX: null,
+  startY: null,
+
+  // Keycrop
+  isKeyCroping: false,
+  isKeyLeft: false,
+  isKeyUp: false,
+
+  defaults: {
+    // min crop dimension
+    minHeight: 1,
+    minWidth: 1,
+    // ensure crop ratio
+    ratio: null,
+    // quick crop feature (set a key code to enable it)
+    quickCropKey: false
+  },
+
+  initialize: function InitDarkroomCropPlugin() {
+    var buttonGroup = this.darkroom.toolbar.createButtonGroup();
+
+    this.cropButton = buttonGroup.createButton({
+      image: 'crop'
+    });
+    this.okButton = buttonGroup.createButton({
+      image: 'done',
+      type: 'success',
+      hide: true
+    });
+    this.cancelButton = buttonGroup.createButton({
+      image: 'close',
+      type: 'danger',
+      hide: true
+    });
+
+    // Buttons click
+    this.cropButton.addEventListener('click', this.toggleCrop.bind(this));
+    this.okButton.addEventListener('click', this.cropCurrentZone.bind(this));
+    this.cancelButton.addEventListener('click', this.releaseFocus.bind(this));
+
+    // Canvas events
+    this.darkroom.canvas.on('mouse:down', this.onMouseDown.bind(this));
+    this.darkroom.canvas.on('mouse:move', this.onMouseMove.bind(this));
+    this.darkroom.canvas.on('mouse:up', this.onMouseUp.bind(this));
+    this.darkroom.canvas.on('object:moving', this.onObjectMoving.bind(this));
+    this.darkroom.canvas.on('object:scaling', this.onObjectScaling.bind(this));
+
+    fabric.util.addListener(fabric.document, 'keydown', this.onKeyDown.bind(this));
+    fabric.util.addListener(fabric.document, 'keyup', this.onKeyUp.bind(this));
+
+    this.darkroom.addEventListener('core:transformation', this.releaseFocus.bind(this));
+  },
+
+  // Avoid crop zone to go beyond the canvas edges
+  onObjectMoving: function(event) {
+    if (!this.hasFocus()) {
+      return;
+    }
+
+    var currentObject = event.target;
+    if (currentObject !== this.cropZone)
+      return;
+
+    var canvas = this.darkroom.canvas;
+    var x = currentObject.getLeft(), y = currentObject.getTop();
+    var w = currentObject.getWidth(), h = currentObject.getHeight();
+    var maxX = canvas.getWidth() - w;
+    var maxY = canvas.getHeight() - h;
+
+    if (x < 0)
+      currentObject.set('left', 0);
+    if (y < 0)
+      currentObject.set('top', 0);
+    if (x > maxX)
+      currentObject.set('left', maxX);
+    if (y > maxY)
+      currentObject.set('top', maxY);
+
+    this.darkroom.dispatchEvent('crop:update');
+  },
+
+  // Prevent crop zone from going beyond the canvas edges (like mouseMove)
+  onObjectScaling: function(event) {
+    if (!this.hasFocus()) {
+      return;
+    }
+
+    var preventScaling = false;
+    var currentObject = event.target;
+    if (currentObject !== this.cropZone)
+      return;
+
+    var canvas = this.darkroom.canvas;
+    var pointer = canvas.getPointer(event.e);
+    var x = pointer.x;
+    var y = pointer.y;
+
+    var minX = currentObject.getLeft();
+    var minY = currentObject.getTop();
+    var maxX = currentObject.getLeft() + currentObject.getWidth();
+    var maxY = currentObject.getTop() + currentObject.getHeight();
+
+    if (null !== this.options.ratio) {
+      if (minX < 0 || maxX > canvas.getWidth() || minY < 0 || maxY > canvas.getHeight()) {
+        preventScaling = true;
+      }
+    }
+
+    if (minX < 0 || maxX > canvas.getWidth() || preventScaling) {
+      var lastScaleX = this.lastScaleX || 1;
+      currentObject.setScaleX(lastScaleX);
+    }
+    if (minX < 0) {
+      currentObject.setLeft(0);
+    }
+
+    if (minY < 0 || maxY > canvas.getHeight() || preventScaling) {
+      var lastScaleY = this.lastScaleY || 1;
+      currentObject.setScaleY(lastScaleY);
+    }
+    if (minY < 0) {
+      currentObject.setTop(0);
+    }
+
+    if (currentObject.getWidth() < this.options.minWidth) {
+      currentObject.scaleToWidth(this.options.minWidth);
+    }
+    if (currentObject.getHeight() < this.options.minHeight) {
+      currentObject.scaleToHeight(this.options.minHeight);
+    }
+
+    this.lastScaleX = currentObject.getScaleX();
+    this.lastScaleY = currentObject.getScaleY();
+
+    this.darkroom.dispatchEvent('crop:update');
+  },
+
+  // Init crop zone
+  onMouseDown: function(event) {
+    if (!this.hasFocus()) {
+      return;
+    }
+
+    var canvas = this.darkroom.canvas;
+
+    // recalculate offset, in case canvas was manipulated since last `calcOffset`
+    canvas.calcOffset();
+    var pointer = canvas.getPointer(event.e);
+    var x = pointer.x;
+    var y = pointer.y;
+    var point = new fabric.Point(x, y);
+
+    // Check if user want to scale or drag the crop zone.
+    var activeObject = canvas.getActiveObject();
+    if (activeObject === this.cropZone || this.cropZone.containsPoint(point)) {
+      return;
+    }
+
+    canvas.discardActiveObject();
+    this.cropZone.setWidth(0);
+    this.cropZone.setHeight(0);
+    this.cropZone.setScaleX(1);
+    this.cropZone.setScaleY(1);
+
+    this.startX = x;
+    this.startY = y;
+  },
+
+  // Extend crop zone
+  onMouseMove: function(event) {
+    // Quick crop feature
+    if (this.isKeyCroping)
+      return this.onMouseMoveKeyCrop(event);
+
+    if (null === this.startX || null === this.startY) {
+      return;
+    }
+
+    var canvas = this.darkroom.canvas;
+    var pointer = canvas.getPointer(event.e);
+    var x = pointer.x;
+    var y = pointer.y;
+
+    this._renderCropZone(this.startX, this.startY, x, y);
+  },
+
+  onMouseMoveKeyCrop: function(event) {
+    var canvas = this.darkroom.canvas;
+    var zone = this.cropZone;
+
+    var pointer = canvas.getPointer(event.e);
+    var x = pointer.x;
+    var y = pointer.y;
+
+    if (!zone.left || !zone.top) {
+      zone.setTop(y);
+      zone.setLeft(x);
+    }
+
+    this.isKeyLeft =  x < zone.left + zone.width / 2 ;
+    this.isKeyUp = y < zone.top + zone.height / 2 ;
+
+    this._renderCropZone(
+      Math.min(zone.left, x),
+      Math.min(zone.top, y),
+      Math.max(zone.left+zone.width, x),
+      Math.max(zone.top+zone.height, y)
+    );
+  },
+
+  // Finish crop zone
+  onMouseUp: function(event) {
+    if (null === this.startX || null === this.startY) {
+      return;
+    }
+
+    var canvas = this.darkroom.canvas;
+    this.cropZone.setCoords();
+    canvas.setActiveObject(this.cropZone);
+    canvas.calcOffset();
+
+    this.startX = null;
+    this.startY = null;
+  },
+
+  onKeyDown: function(event) {
+    if (false === this.options.quickCropKey || event.keyCode !== this.options.quickCropKey || this.isKeyCroping)
+      return;
+
+    // Active quick crop flow
+    this.isKeyCroping = true ;
+    this.darkroom.canvas.discardActiveObject();
+    this.cropZone.setWidth(0);
+    this.cropZone.setHeight(0);
+    this.cropZone.setScaleX(1);
+    this.cropZone.setScaleY(1);
+    this.cropZone.setTop(0);
+    this.cropZone.setLeft(0);
+  },
+
+  onKeyUp: function(event) {
+    if (false === this.options.quickCropKey || event.keyCode !== this.options.quickCropKey || !this.isKeyCroping)
+      return;
+
+    // Unactive quick crop flow
+    this.isKeyCroping = false;
+    this.startX = 1;
+    this.startY = 1;
+    this.onMouseUp();
+  },
+
+  selectZone: function(x, y, width, height, forceDimension) {
+    if (!this.hasFocus())
+      this.requireFocus();
+
+    if (!forceDimension) {
+      this._renderCropZone(x, y, x+width, y+height);
+    } else {
+      this.cropZone.set({
+        'left': x,
+        'top': y,
+        'width': width,
+        'height': height
+      });
+    }
+
+    var canvas = this.darkroom.canvas;
+    canvas.bringToFront(this.cropZone);
+    this.cropZone.setCoords();
+    canvas.setActiveObject(this.cropZone);
+    canvas.calcOffset();
+
+    this.darkroom.dispatchEvent('crop:update');
+  },
+
+  toggleCrop: function() {
+    if (!this.hasFocus())
+      this.requireFocus();
+    else
+      this.releaseFocus();
+  },
+
+  cropCurrentZone: function() {
+    if (!this.hasFocus())
+      return;
+
+    // Avoid croping empty zone
+    if (this.cropZone.width < 1 && this.cropZone.height < 1)
+      return;
+
+    var image = this.darkroom.image;
+
+    // Compute crop zone dimensions
+    var top = this.cropZone.getTop() - image.getTop();
+    var left = this.cropZone.getLeft() - image.getLeft();
+    var width = this.cropZone.getWidth();
+    var height = this.cropZone.getHeight();
+
+    // Adjust dimensions to image only
+    if (top < 0) {
+      height += top;
+      top = 0;
+    }
+
+    if (left < 0) {
+      width += left;
+      left = 0;
+    }
+
+    // Apply crop transformation.
+    // Make sure to use relative dimension since the crop will be applied
+    // on the source image.
+    this.darkroom.applyTransformation(new Crop({
+      top: top / image.getHeight(),
+      left: left / image.getWidth(),
+      width: width / image.getWidth(),
+      height: height / image.getHeight(),
+    }));
+  },
+
+  // Test wether crop zone is set
+  hasFocus: function() {
+    return this.cropZone !== undefined;
+  },
+
+  // Create the crop zone
+  requireFocus: function() {
+    this.cropZone = new CropZone({
+      fill: 'transparent',
+      hasBorders: false,
+      originX: 'left',
+      originY: 'top',
+      //stroke: '#444',
+      //strokeDashArray: [5, 5],
+      //borderColor: '#444',
+      cornerColor: '#444',
+      cornerSize: 8,
+      transparentCorners: false,
+      lockRotation: true,
+      hasRotatingPoint: false,
+    });
+
+    if (null !== this.options.ratio) {
+      this.cropZone.set('lockUniScaling', true);
+    }
+
+    this.darkroom.canvas.add(this.cropZone);
+    this.darkroom.canvas.defaultCursor = 'crosshair';
+
+    this.cropButton.active(true);
+    this.okButton.hide(false);
+    this.cancelButton.hide(false);
+  },
+
+  // Remove the crop zone
+  releaseFocus: function() {
+    if (undefined === this.cropZone)
+      return;
+
+    this.cropZone.remove();
+    this.cropZone = undefined;
+
+    this.cropButton.active(false);
+    this.okButton.hide(true);
+    this.cancelButton.hide(true);
+
+    this.darkroom.canvas.defaultCursor = 'default';
+
+    this.darkroom.dispatchEvent('crop:update');
+  },
+
+  _renderCropZone: function(fromX, fromY, toX, toY) {
+    var canvas = this.darkroom.canvas;
+
+    var isRight = (toX > fromX);
+    var isLeft = !isRight;
+    var isDown = (toY > fromY);
+    var isUp = !isDown;
+
+    var minWidth = Math.min(+this.options.minWidth, canvas.getWidth());
+    var minHeight = Math.min(+this.options.minHeight, canvas.getHeight());
+
+    // Define corner coordinates
+    var leftX = Math.min(fromX, toX);
+    var rightX = Math.max(fromX, toX);
+    var topY = Math.min(fromY, toY);
+    var bottomY = Math.max(fromY, toY);
+
+    // Replace current point into the canvas
+    leftX = Math.max(0, leftX);
+    rightX = Math.min(canvas.getWidth(), rightX);
+    topY = Math.max(0, topY)
+    bottomY = Math.min(canvas.getHeight(), bottomY);
+
+    // Recalibrate coordinates according to given options
+    if (rightX - leftX < minWidth) {
+      if (isRight)
+        rightX = leftX + minWidth;
+      else
+        leftX = rightX - minWidth;
+    }
+    if (bottomY - topY < minHeight) {
+      if (isDown)
+        bottomY = topY + minHeight;
+      else
+        topY = bottomY - minHeight;
+    }
+
+    // Truncate truncate according to canvas dimensions
+    if (leftX < 0) {
+      // Translate to the left
+      rightX += Math.abs(leftX);
+      leftX = 0
+    }
+    if (rightX > canvas.getWidth()) {
+      // Translate to the right
+      leftX -= (rightX - canvas.getWidth());
+      rightX = canvas.getWidth();
+    }
+    if (topY < 0) {
+      // Translate to the bottom
+      bottomY += Math.abs(topY);
+      topY = 0
+    }
+    if (bottomY > canvas.getHeight()) {
+      // Translate to the right
+      topY -= (bottomY - canvas.getHeight());
+      bottomY = canvas.getHeight();
+    }
+
+    var width = rightX - leftX;
+    var height = bottomY - topY;
+    var currentRatio = width / height;
+
+    if (this.options.ratio && +this.options.ratio !== currentRatio) {
+      var ratio = +this.options.ratio;
+
+      if(this.isKeyCroping) {
+        isLeft = this.isKeyLeft;
+        isUp = this.isKeyUp;
+      }
+
+      if (currentRatio < ratio) {
+        var newWidth = height * ratio;
+        if (isLeft) {
+          leftX -= (newWidth - width);
+        }
+        width = newWidth;
+      } else if (currentRatio > ratio) {
+        var newHeight = height / (ratio * height/width);
+        if (isUp) {
+          topY -= (newHeight - height);
+        }
+        height = newHeight;
+      }
+
+      if (leftX < 0) {
+        leftX = 0;
+        //TODO
+      }
+      if (topY < 0) {
+        topY = 0;
+        //TODO
+      }
+      if (leftX + width > canvas.getWidth()) {
+        var newWidth = canvas.getWidth() - leftX;
+        height = newWidth * height / width;
+        width = newWidth;
+        if (isUp) {
+          topY = fromY - height;
+        }
+      }
+      if (topY + height > canvas.getHeight()) {
+        var newHeight = canvas.getHeight() - topY;
+        width = width * newHeight / height;
+        height = newHeight;
+        if (isLeft) {
+          leftX = fromX - width;
+        }
+      }
+    }
+
+    // Apply coordinates
+    this.cropZone.left = leftX;
+    this.cropZone.top = topY;
+    this.cropZone.width = width;
+    this.cropZone.height = height;
+
+    this.darkroom.canvas.bringToFront(this.cropZone);
+
+    this.darkroom.dispatchEvent('crop:update');
+  }
+});
+
+})();
--- a/web_widget_darkroom/static/lib/darkroomjs/lib/js/plugins/darkroom.history.js
+++ b/web_widget_darkroom/static/lib/darkroomjs/lib/js/plugins/darkroom.history.js
@ -0,0 +1,66 @@
+;(function(window, document, Darkroom, fabric) {
+  'use strict';
+
+  Darkroom.plugins['history'] = Darkroom.Plugin.extend({
+    undoTransformations: [],
+
+    initialize: function InitDarkroomHistoryPlugin() {
+      this._initButtons();
+
+      this.darkroom.addEventListener('core:transformation', this._onTranformationApplied.bind(this));
+    },
+
+    undo: function() {
+      if (this.darkroom.transformations.length === 0) {
+        return;
+      }
+
+      var lastTransformation = this.darkroom.transformations.pop();
+      this.undoTransformations.unshift(lastTransformation);
+
+      this.darkroom.reinitializeImage();
+      this._updateButtons();
+    },
+
+    redo: function() {
+      if (this.undoTransformations.length === 0) {
+        return;
+      }
+
+      var cancelTransformation = this.undoTransformations.shift();
+      this.darkroom.transformations.push(cancelTransformation);
+
+      this.darkroom.reinitializeImage();
+      this._updateButtons();
+    },
+
+    _initButtons: function() {
+      var buttonGroup = this.darkroom.toolbar.createButtonGroup();
+
+      this.backButton = buttonGroup.createButton({
+        image: 'undo',
+        disabled: true
+      });
+
+      this.forwardButton = buttonGroup.createButton({
+        image: 'redo',
+        disabled: true
+      });
+
+      this.backButton.addEventListener('click', this.undo.bind(this));
+      this.forwardButton.addEventListener('click', this.redo.bind(this));
+
+      return this;
+    },
+
+    _updateButtons: function() {
+      this.backButton.disable((this.darkroom.transformations.length === 0))
+      this.forwardButton.disable((this.undoTransformations.length === 0))
+    },
+
+    _onTranformationApplied: function() {
+      this.undoTransformations = [];
+      this._updateButtons();
+    }
+  });
+})(window, document, Darkroom, fabric);
--- a/web_widget_darkroom/static/lib/darkroomjs/lib/js/plugins/darkroom.rotate.js
+++ b/web_widget_darkroom/static/lib/darkroomjs/lib/js/plugins/darkroom.rotate.js
@ -0,0 +1,57 @@
+(function() {
+'use strict';
+
+var Rotation = Darkroom.Transformation.extend({
+  applyTransformation: function(canvas, image, next) {
+    var angle = (image.getAngle() + this.options.angle) % 360;
+    image.rotate(angle);
+
+    var width, height;
+    height = Math.abs(image.getWidth()*(Math.sin(angle*Math.PI/180)))+Math.abs(image.getHeight()*(Math.cos(angle*Math.PI/180)));
+    width = Math.abs(image.getHeight()*(Math.sin(angle*Math.PI/180)))+Math.abs(image.getWidth()*(Math.cos(angle*Math.PI/180)));
+
+    canvas.setWidth(width);
+    canvas.setHeight(height);
+
+    canvas.centerObject(image);
+    image.setCoords();
+    canvas.renderAll();
+
+    next();
+  }
+});
+
+Darkroom.plugins['rotate'] = Darkroom.Plugin.extend({
+
+  initialize: function InitDarkroomRotatePlugin() {
+    var buttonGroup = this.darkroom.toolbar.createButtonGroup();
+
+    var leftButton = buttonGroup.createButton({
+      image: 'rotate-left'
+    });
+
+    var rightButton = buttonGroup.createButton({
+      image: 'rotate-right'
+    });
+
+    leftButton.addEventListener('click', this.rotateLeft.bind(this));
+    rightButton.addEventListener('click', this.rotateRight.bind(this));
+  },
+
+  rotateLeft: function rotateLeft() {
+    this.rotate(-90);
+  },
+
+  rotateRight: function rotateRight() {
+    this.rotate(90);
+  },
+
+  rotate: function rotate(angle) {
+    this.darkroom.applyTransformation(
+      new Rotation({angle: angle})
+    );
+  }
+
+});
+
+})();
--- a/web_widget_darkroom/static/lib/darkroomjs/lib/js/plugins/darkroom.save.js
+++ b/web_widget_darkroom/static/lib/darkroomjs/lib/js/plugins/darkroom.save.js
@ -0,0 +1,23 @@
+(function() {
+'use strict';
+
+Darkroom.plugins['save'] = Darkroom.Plugin.extend({
+
+  defaults: {
+    callback: function() {
+      this.darkroom.selfDestroy();
+    }
+  },
+
+  initialize: function InitializeDarkroomSavePlugin() {
+    var buttonGroup = this.darkroom.toolbar.createButtonGroup();
+
+    this.destroyButton = buttonGroup.createButton({
+      image: 'save'
+    });
+
+    this.destroyButton.addEventListener('click', this.options.callback.bind(this));
+  },
+});
+
+})();
--- a/web_widget_darkroom/static/lib/darkroomjs/package.json
+++ b/web_widget_darkroom/static/lib/darkroomjs/package.json
@ -0,0 +1,39 @@
+{
+  "name": "darkroom",
+  "description": "Extensible image editing tool via HTML canvas",
+  "version": "2.0.1",
+  "license": "MIT",
+  "homepage": "https://mattketmo.github.io/darkroomjs",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mattketmo/darkroomjs.git"
+  },
+  "author": "Matthieu Moquet <matthieu@moquet.net> (http://moquet.net/)",
+  "dependencies": {},
+  "devDependencies": {
+    "cheerio": "^0.18.0",
+    "gulp": "^3.8.6",
+    "gulp-concat": "^2.3.4",
+    "gulp-connect": "^2.0.6",
+    "gulp-inject": "^1.2.0",
+    "gulp-plumber": "^0.6.4",
+    "gulp-sass": "^0.7.2",
+    "gulp-sourcemaps": "^1.1.0",
+    "gulp-svgmin": "^1.1.1",
+    "gulp-svgstore": "^5.0.0",
+    "gulp-uglify": "^0.3.1",
+    "gulp-util": "^3.0.0",
+    "js-string-escape": "^1.0.0",
+    "rimraf": "^2.2.8",
+    "streamqueue": "^0.1.1"
+  },
+  "scripts": {
+    "start": "node_modules/.bin/gulp server build --prod",
+    "develop": "node_modules/.bin/gulp"
+  },
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components"
+  ]
+}
--- a/web_widget_darkroom/static/src/css/darkroom.css
+++ b/web_widget_darkroom/static/src/css/darkroom.css
@ -0,0 +1,11 @@
+/*.darkroom-container{
+    padding-top: 50px;
+}
+.darkroom-toolbar{
+    top: 5px;
+}
+*/
+
+.darkroom-button-group{
+    display: inline;
+}
--- a/web_widget_darkroom/static/src/js/darkroom_plugins.js
+++ b/web_widget_darkroom/static/src/js/darkroom_plugins.js
@ -0,0 +1,20 @@
+/* Copyright 2016 LasLabs Inc.
+ * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html).
+ */
+
+odoo.define('web_widget_darkroom.darkroom_plugins', function(require){
+  "use strict";
+  
+  var DarkroomPlugins = Object;
+  DarkroomPlugins.extend = function(destination, source) {
+    for (var property in source) {
+      if (source.hasOwnProperty(property)) {
+        destination[property] = source[property];
+      }
+    }
+    return destination;
+  };
+  
+  return DarkroomPlugins
+  
+});
--- a/web_widget_darkroom/static/src/js/plugins/darkroom.crop.js
+++ b/web_widget_darkroom/static/src/js/plugins/darkroom.crop.js
@ -0,0 +1,683 @@
+/* Adapted from https://github.com/MattKetmo/darkroomjs/tree/master/lib/js/plugins
+ * License https://github.com/MattKetmo/darkroomjs/blob/master/LICENSE
+ */
+
+odoo.define('web_widget_darkroom.darkroom_crop', function(require){
+
+  'use strict';
+
+  var DarkroomPluginCrop = function(){
+    
+    var Crop = Darkroom.Transformation.extend({
+      applyTransformation: function(canvas, image, next) {
+        // Snapshot the image delimited by the crop zone
+        var snapshot = new Image();
+        snapshot.onload = function() {
+          // Validate image
+          if (height < 1 || width < 1)
+            return;
+    
+          var imgInstance = new fabric.Image(this, {
+            // options to make the image static
+            selectable: false,
+            evented: false,
+            lockMovementX: true,
+            lockMovementY: true,
+            lockRotation: true,
+            lockScalingX: true,
+            lockScalingY: true,
+            lockUniScaling: true,
+            hasControls: false,
+            hasBorders: false
+          });
+    
+          var width = this.width;
+          var height = this.height;
+    
+          // Update canvas size
+          canvas.setWidth(width);
+          canvas.setHeight(height);
+    
+          // Add image
+          image.remove();
+          canvas.add(imgInstance);
+    
+          next(imgInstance);
+        };
+    
+        var viewport = Darkroom.Utils.computeImageViewPort(image);
+        var imageWidth = viewport.width;
+        var imageHeight = viewport.height;
+    
+        var left = this.options.left * imageWidth;
+        var top = this.options.top * imageHeight;
+        var width = Math.min(this.options.width * imageWidth, imageWidth - left);
+        var height = Math.min(this.options.height * imageHeight, imageHeight - top);
+    
+        snapshot.src = canvas.toDataURL({
+          left: left,
+          top: top,
+          width: width,
+          height: height,
+        });
+      }
+    });
+    
+    var CropZone = fabric.util.createClass(fabric.Rect, {
+      _render: function(ctx) {
+        this.callSuper('_render', ctx);
+    
+        var canvas = ctx.canvas;
+        var dashWidth = 7;
+    
+        // Set original scale
+        var flipX = this.flipX ? -1 : 1;
+        var flipY = this.flipY ? -1 : 1;
+        var scaleX = flipX / this.scaleX;
+        var scaleY = flipY / this.scaleY;
+    
+        ctx.scale(scaleX, scaleY);
+    
+        // Overlay rendering
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+        this._renderOverlay(ctx);
+    
+        // Set dashed borders
+        if (ctx.setLineDash !== undefined)
+          ctx.setLineDash([dashWidth, dashWidth]);
+        else if (ctx.mozDash !== undefined)
+          ctx.mozDash = [dashWidth, dashWidth];
+    
+        // First lines rendering with black
+        ctx.strokeStyle = 'rgba(0, 0, 0, 0.2)';
+        this._renderBorders(ctx);
+        this._renderGrid(ctx);
+    
+        // Re render lines in white
+        ctx.lineDashOffset = dashWidth;
+        ctx.strokeStyle = 'rgba(255, 255, 255, 0.4)';
+        this._renderBorders(ctx);
+        this._renderGrid(ctx);
+    
+        // Reset scale
+        ctx.scale(1/scaleX, 1/scaleY);
+      },
+    
+      _renderOverlay: function(ctx) {
+        var canvas = ctx.canvas;
+        var borderOffset = 0;
+    
+        //
+        //    x0    x1        x2      x3
+        // y0 +------------------------+
+        //    |\\\\\\\\\\\\\\\\\\\\\\\\|
+        //    |\\\\\\\\\\\\\\\\\\\\\\\\|
+        // y1 +------+---------+-------+
+        //    |\\\\\\|         |\\\\\\\|
+        //    |\\\\\\|    0    |\\\\\\\|
+        //    |\\\\\\|         |\\\\\\\|
+        // y2 +------+---------+-------+
+        //    |\\\\\\\\\\\\\\\\\\\\\\\\|
+        //    |\\\\\\\\\\\\\\\\\\\\\\\\|
+        // y3 +------------------------+
+        //
+    
+        var x0 = Math.ceil(-this.getWidth() / 2 - this.getLeft());
+        var x1 = Math.ceil(-this.getWidth() / 2);
+        var x2 = Math.ceil(this.getWidth() / 2);
+        var x3 = Math.ceil(this.getWidth() / 2 + (canvas.width - this.getWidth() - this.getLeft()));
+    
+        var y0 = Math.ceil(-this.getHeight() / 2 - this.getTop());
+        var y1 = Math.ceil(-this.getHeight() / 2);
+        var y2 = Math.ceil(this.getHeight() / 2);
+        var y3 = Math.ceil(this.getHeight() / 2 + (canvas.height - this.getHeight() - this.getTop()));
+    
+        // Upper rect
+        ctx.fillRect(x0, y0, x3 - x0, y1 - y0 + borderOffset);
+    
+        // Left rect
+        ctx.fillRect(x0, y1, x1 - x0, y2 - y1 + borderOffset);
+    
+        // Right rect
+        ctx.fillRect(x2, y1, x3 - x2, y2 - y1 + borderOffset);
+    
+        // Down rect
+        ctx.fillRect(x0, y2, x3 - x0, y3 - y2);
+      },
+    
+      _renderBorders: function(ctx) {
+        ctx.beginPath();
+        ctx.moveTo(-this.getWidth()/2, -this.getHeight()/2); // upper left
+        ctx.lineTo(this.getWidth()/2, -this.getHeight()/2); // upper right
+        ctx.lineTo(this.getWidth()/2, this.getHeight()/2); // down right
+        ctx.lineTo(-this.getWidth()/2, this.getHeight()/2); // down left
+        ctx.lineTo(-this.getWidth()/2, -this.getHeight()/2); // upper left
+        ctx.stroke();
+      },
+    
+      _renderGrid: function(ctx) {
+        // Vertical lines
+        ctx.beginPath();
+        ctx.moveTo(-this.getWidth()/2 + 1/3 * this.getWidth(), -this.getHeight()/2);
+        ctx.lineTo(-this.getWidth()/2 + 1/3 * this.getWidth(), this.getHeight()/2);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.moveTo(-this.getWidth()/2 + 2/3 * this.getWidth(), -this.getHeight()/2);
+        ctx.lineTo(-this.getWidth()/2 + 2/3 * this.getWidth(), this.getHeight()/2);
+        ctx.stroke();
+        // Horizontal lines
+        ctx.beginPath();
+        ctx.moveTo(-this.getWidth()/2, -this.getHeight()/2 + 1/3 * this.getHeight());
+        ctx.lineTo(this.getWidth()/2, -this.getHeight()/2 + 1/3 * this.getHeight());
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.moveTo(-this.getWidth()/2, -this.getHeight()/2 + 2/3 * this.getHeight());
+        ctx.lineTo(this.getWidth()/2, -this.getHeight()/2 + 2/3 * this.getHeight());
+        ctx.stroke();
+      }
+    });
+    
+    Darkroom.plugins['crop'] = Darkroom.Plugin.extend({
+      // Init point
+      startX: null,
+      startY: null,
+    
+      // Keycrop
+      isKeyCroping: false,
+      isKeyLeft: false,
+      isKeyUp: false,
+    
+      defaults: {
+        // min crop dimension
+        minHeight: 1,
+        minWidth: 1,
+        // ensure crop ratio
+        ratio: null,
+        // quick crop feature (set a key code to enable it)
+        quickCropKey: false
+      },
+    
+      initialize: function InitDarkroomCropPlugin() {
+        var buttonGroup = this.darkroom.toolbar.createButtonGroup();
+    
+        this.cropButton = buttonGroup.createButton({
+          image: 'fa fa-crop',
+          editOnly: true,
+        });
+        this.okButton = buttonGroup.createButton({
+          image: 'fa fa-check',
+          editOnly: true,
+          type: 'success',
+          hide: true
+        });
+        this.cancelButton = buttonGroup.createButton({
+          image: 'fa fa-times',
+          editOnly: true,
+          type: 'danger',
+          hide: true
+        });
+    
+        // Buttons click
+        this.cropButton.addEventListener('click', this.toggleCrop.bind(this));
+        this.okButton.addEventListener('click', this.cropCurrentZone.bind(this));
+        this.cancelButton.addEventListener('click', this.releaseFocus.bind(this));
+    
+        // Canvas events
+        this.darkroom.canvas.on('mouse:down', this.onMouseDown.bind(this));
+        this.darkroom.canvas.on('mouse:move', this.onMouseMove.bind(this));
+        this.darkroom.canvas.on('mouse:up', this.onMouseUp.bind(this));
+        this.darkroom.canvas.on('object:moving', this.onObjectMoving.bind(this));
+        this.darkroom.canvas.on('object:scaling', this.onObjectScaling.bind(this));
+    
+        fabric.util.addListener(fabric.document, 'keydown', this.onKeyDown.bind(this));
+        fabric.util.addListener(fabric.document, 'keyup', this.onKeyUp.bind(this));
+    
+        this.darkroom.addEventListener('core:transformation', this.releaseFocus.bind(this));
+      },
+    
+      // Avoid crop zone to go beyond the canvas edges
+      onObjectMoving: function(event) {
+        if (!this.hasFocus()) {
+          return;
+        }
+    
+        var currentObject = event.target;
+        if (currentObject !== this.cropZone)
+          return;
+    
+        var canvas = this.darkroom.canvas;
+        var x = currentObject.getLeft(), y = currentObject.getTop();
+        var w = currentObject.getWidth(), h = currentObject.getHeight();
+        var maxX = canvas.getWidth() - w;
+        var maxY = canvas.getHeight() - h;
+    
+        if (x < 0)
+          currentObject.set('left', 0);
+        if (y < 0)
+          currentObject.set('top', 0);
+        if (x > maxX)
+          currentObject.set('left', maxX);
+        if (y > maxY)
+          currentObject.set('top', maxY);
+    
+        this.darkroom.dispatchEvent('crop:update');
+      },
+    
+      // Prevent crop zone from going beyond the canvas edges (like mouseMove)
+      onObjectScaling: function(event) {
+        if (!this.hasFocus()) {
+          return;
+        }
+    
+        var preventScaling = false;
+        var currentObject = event.target;
+        if (currentObject !== this.cropZone)
+          return;
+    
+        var canvas = this.darkroom.canvas;
+        var pointer = canvas.getPointer(event.e);
+        var x = pointer.x;
+        var y = pointer.y;
+    
+        var minX = currentObject.getLeft();
+        var minY = currentObject.getTop();
+        var maxX = currentObject.getLeft() + currentObject.getWidth();
+        var maxY = currentObject.getTop() + currentObject.getHeight();
+    
+        if (null !== this.options.ratio) {
+          if (minX < 0 || maxX > canvas.getWidth() || minY < 0 || maxY > canvas.getHeight()) {
+            preventScaling = true;
+          }
+        }
+    
+        if (minX < 0 || maxX > canvas.getWidth() || preventScaling) {
+          var lastScaleX = this.lastScaleX || 1;
+          currentObject.setScaleX(lastScaleX);
+        }
+        if (minX < 0) {
+          currentObject.setLeft(0);
+        }
+    
+        if (minY < 0 || maxY > canvas.getHeight() || preventScaling) {
+          var lastScaleY = this.lastScaleY || 1;
+          currentObject.setScaleY(lastScaleY);
+        }
+        if (minY < 0) {
+          currentObject.setTop(0);
+        }
+    
+        if (currentObject.getWidth() < this.options.minWidth) {
+          currentObject.scaleToWidth(this.options.minWidth);
+        }
+        if (currentObject.getHeight() < this.options.minHeight) {
+          currentObject.scaleToHeight(this.options.minHeight);
+        }
+    
+        this.lastScaleX = currentObject.getScaleX();
+        this.lastScaleY = currentObject.getScaleY();
+    
+        this.darkroom.dispatchEvent('crop:update');
+      },
+    
+      // Init crop zone
+      onMouseDown: function(event) {
+        if (!this.hasFocus()) {
+          return;
+        }
+    
+        var canvas = this.darkroom.canvas;
+    
+        // recalculate offset, in case canvas was manipulated since last `calcOffset`
+        canvas.calcOffset();
+        var pointer = canvas.getPointer(event.e);
+        var x = pointer.x;
+        var y = pointer.y;
+        var point = new fabric.Point(x, y);
+    
+        // Check if user want to scale or drag the crop zone.
+        var activeObject = canvas.getActiveObject();
+        if (activeObject === this.cropZone || this.cropZone.containsPoint(point)) {
+          return;
+        }
+    
+        canvas.discardActiveObject();
+        this.cropZone.setWidth(0);
+        this.cropZone.setHeight(0);
+        this.cropZone.setScaleX(1);
+        this.cropZone.setScaleY(1);
+    
+        this.startX = x;
+        this.startY = y;
+      },
+    
+      // Extend crop zone
+      onMouseMove: function(event) {
+        // Quick crop feature
+        if (this.isKeyCroping)
+          return this.onMouseMoveKeyCrop(event);
+    
+        if (null === this.startX || null === this.startY) {
+          return;
+        }
+    
+        var canvas = this.darkroom.canvas;
+        var pointer = canvas.getPointer(event.e);
+        var x = pointer.x;
+        var y = pointer.y;
+    
+        this._renderCropZone(this.startX, this.startY, x, y);
+      },
+    
+      onMouseMoveKeyCrop: function(event) {
+        var canvas = this.darkroom.canvas;
+        var zone = this.cropZone;
+    
+        var pointer = canvas.getPointer(event.e);
+        var x = pointer.x;
+        var y = pointer.y;
+    
+        if (!zone.left || !zone.top) {
+          zone.setTop(y);
+          zone.setLeft(x);
+        }
+    
+        this.isKeyLeft =  x < zone.left + zone.width / 2 ;
+        this.isKeyUp = y < zone.top + zone.height / 2 ;
+    
+        this._renderCropZone(
+          Math.min(zone.left, x),
+          Math.min(zone.top, y),
+          Math.max(zone.left+zone.width, x),
+          Math.max(zone.top+zone.height, y)
+        );
+      },
+    
+      // Finish crop zone
+      onMouseUp: function(event) {
+        if (null === this.startX || null === this.startY) {
+          return;
+        }
+    
+        var canvas = this.darkroom.canvas;
+        this.cropZone.setCoords();
+        canvas.setActiveObject(this.cropZone);
+        canvas.calcOffset();
+    
+        this.startX = null;
+        this.startY = null;
+      },
+    
+      onKeyDown: function(event) {
+        if (false === this.options.quickCropKey || event.keyCode !== this.options.quickCropKey || this.isKeyCroping)
+          return;
+    
+        // Active quick crop flow
+        this.isKeyCroping = true ;
+        this.darkroom.canvas.discardActiveObject();
+        this.cropZone.setWidth(0);
+        this.cropZone.setHeight(0);
+        this.cropZone.setScaleX(1);
+        this.cropZone.setScaleY(1);
+        this.cropZone.setTop(0);
+        this.cropZone.setLeft(0);
+      },
+    
+      onKeyUp: function(event) {
+        if (false === this.options.quickCropKey || event.keyCode !== this.options.quickCropKey || !this.isKeyCroping)
+          return;
+    
+        // Unactive quick crop flow
+        this.isKeyCroping = false;
+        this.startX = 1;
+        this.startY = 1;
+        this.onMouseUp();
+      },
+    
+      selectZone: function(x, y, width, height, forceDimension) {
+        if (!this.hasFocus())
+          this.requireFocus();
+    
+        if (!forceDimension) {
+          this._renderCropZone(x, y, x+width, y+height);
+        } else {
+          this.cropZone.set({
+            'left': x,
+            'top': y,
+            'width': width,
+            'height': height
+          });
+        }
+    
+        var canvas = this.darkroom.canvas;
+        canvas.bringToFront(this.cropZone);
+        this.cropZone.setCoords();
+        canvas.setActiveObject(this.cropZone);
+        canvas.calcOffset();
+    
+        this.darkroom.dispatchEvent('crop:update');
+      },
+    
+      toggleCrop: function() {
+        if (!this.hasFocus())
+          this.requireFocus();
+        else
+          this.releaseFocus();
+      },
+    
+      cropCurrentZone: function() {
+        if (!this.hasFocus())
+          return;
+    
+        // Avoid croping empty zone
+        if (this.cropZone.width < 1 && this.cropZone.height < 1)
+          return;
+    
+        var image = this.darkroom.image;
+    
+        // Compute crop zone dimensions
+        var top = this.cropZone.getTop() - image.getTop();
+        var left = this.cropZone.getLeft() - image.getLeft();
+        var width = this.cropZone.getWidth();
+        var height = this.cropZone.getHeight();
+    
+        // Adjust dimensions to image only
+        if (top < 0) {
+          height += top;
+          top = 0;
+        }
+    
+        if (left < 0) {
+          width += left;
+          left = 0;
+        }
+    
+        // Apply crop transformation.
+        // Make sure to use relative dimension since the crop will be applied
+        // on the source image.
+        this.darkroom.applyTransformation(new Crop({
+          top: top / image.getHeight(),
+          left: left / image.getWidth(),
+          width: width / image.getWidth(),
+          height: height / image.getHeight(),
+        }));
+      },
+    
+      // Test wether crop zone is set
+      hasFocus: function() {
+        return this.cropZone !== undefined;
+      },
+    
+      // Create the crop zone
+      requireFocus: function() {
+        this.cropZone = new CropZone({
+          fill: 'transparent',
+          hasBorders: false,
+          originX: 'left',
+          originY: 'top',
+          //stroke: '#444',
+          //strokeDashArray: [5, 5],
+          //borderColor: '#444',
+          cornerColor: '#444',
+          cornerSize: 8,
+          transparentCorners: false,
+          lockRotation: true,
+          hasRotatingPoint: false,
+        });
+    
+        if (null !== this.options.ratio) {
+          this.cropZone.set('lockUniScaling', true);
+        }
+    
+        this.darkroom.canvas.add(this.cropZone);
+        this.darkroom.canvas.defaultCursor = 'crosshair';
+    
+        this.cropButton.active(true);
+        this.okButton.hide(false);
+        this.cancelButton.hide(false);
+      },
+    
+      // Remove the crop zone
+      releaseFocus: function() {
+        if (undefined === this.cropZone)
+          return;
+    
+        this.cropZone.remove();
+        this.cropZone = undefined;
+    
+        this.cropButton.active(false);
+        this.okButton.hide(true);
+        this.cancelButton.hide(true);
+    
+        this.darkroom.canvas.defaultCursor = 'default';
+    
+        this.darkroom.dispatchEvent('crop:update');
+      },
+    
+      _renderCropZone: function(fromX, fromY, toX, toY) {
+        var canvas = this.darkroom.canvas;
+    
+        var isRight = (toX > fromX);
+        var isLeft = !isRight;
+        var isDown = (toY > fromY);
+        var isUp = !isDown;
+    
+        var minWidth = Math.min(+this.options.minWidth, canvas.getWidth());
+        var minHeight = Math.min(+this.options.minHeight, canvas.getHeight());
+    
+        // Define corner coordinates
+        var leftX = Math.min(fromX, toX);
+        var rightX = Math.max(fromX, toX);
+        var topY = Math.min(fromY, toY);
+        var bottomY = Math.max(fromY, toY);
+    
+        // Replace current point into the canvas
+        leftX = Math.max(0, leftX);
+        rightX = Math.min(canvas.getWidth(), rightX);
+        topY = Math.max(0, topY)
+        bottomY = Math.min(canvas.getHeight(), bottomY);
+    
+        // Recalibrate coordinates according to given options
+        if (rightX - leftX < minWidth) {
+          if (isRight)
+            rightX = leftX + minWidth;
+          else
+            leftX = rightX - minWidth;
+        }
+        if (bottomY - topY < minHeight) {
+          if (isDown)
+            bottomY = topY + minHeight;
+          else
+            topY = bottomY - minHeight;
+        }
+    
+        // Truncate truncate according to canvas dimensions
+        if (leftX < 0) {
+          // Translate to the left
+          rightX += Math.abs(leftX);
+          leftX = 0
+        }
+        if (rightX > canvas.getWidth()) {
+          // Translate to the right
+          leftX -= (rightX - canvas.getWidth());
+          rightX = canvas.getWidth();
+        }
+        if (topY < 0) {
+          // Translate to the bottom
+          bottomY += Math.abs(topY);
+          topY = 0
+        }
+        if (bottomY > canvas.getHeight()) {
+          // Translate to the right
+          topY -= (bottomY - canvas.getHeight());
+          bottomY = canvas.getHeight();
+        }
+    
+        var width = rightX - leftX;
+        var height = bottomY - topY;
+        var currentRatio = width / height;
+    
+        if (this.options.ratio && +this.options.ratio !== currentRatio) {
+          var ratio = +this.options.ratio;
+    
+          if(this.isKeyCroping) {
+            isLeft = this.isKeyLeft;
+            isUp = this.isKeyUp;
+          }
+    
+          if (currentRatio < ratio) {
+            var newWidth = height * ratio;
+            if (isLeft) {
+              leftX -= (newWidth - width);
+            }
+            width = newWidth;
+          } else if (currentRatio > ratio) {
+            var newHeight = height / (ratio * height/width);
+            if (isUp) {
+              topY -= (newHeight - height);
+            }
+            height = newHeight;
+          }
+    
+          if (leftX < 0) {
+            leftX = 0;
+            //TODO
+          }
+          if (topY < 0) {
+            topY = 0;
+            //TODO
+          }
+          if (leftX + width > canvas.getWidth()) {
+            var newWidth = canvas.getWidth() - leftX;
+            height = newWidth * height / width;
+            width = newWidth;
+            if (isUp) {
+              topY = fromY - height;
+            }
+          }
+          if (topY + height > canvas.getHeight()) {
+            var newHeight = canvas.getHeight() - topY;
+            width = width * newHeight / height;
+            height = newHeight;
+            if (isLeft) {
+              leftX = fromX - width;
+            }
+          }
+        }
+    
+        // Apply coordinates
+        this.cropZone.left = leftX;
+        this.cropZone.top = topY;
+        this.cropZone.width = width;
+        this.cropZone.height = height;
+    
+        this.darkroom.canvas.bringToFront(this.cropZone);
+    
+        this.darkroom.dispatchEvent('crop:update');
+      }
+    });
+    
+  }
+  
+  return {DarkroomPluginCrop: DarkroomPluginCrop};
+
+});
--- a/web_widget_darkroom/static/src/js/plugins/darkroom.history.js
+++ b/web_widget_darkroom/static/src/js/plugins/darkroom.history.js
@ -0,0 +1,80 @@
+/* Adapted from https://github.com/MattKetmo/darkroomjs/tree/master/lib/js/plugins
+ * License https://github.com/MattKetmo/darkroomjs/blob/master/LICENSE
+ */
+
+odoo.define('web_widget_darkroom.darkroom_history', function(require){
+  
+  'use strict';
+
+  var DarkroomPluginHistory = function() {
+  
+    Darkroom.plugins['history'] = Darkroom.Plugin.extend({
+      undoTransformations: [],
+  
+      initialize: function InitDarkroomHistoryPlugin() {
+        this._initButtons();
+  
+        this.darkroom.addEventListener('core:transformation', this._onTranformationApplied.bind(this));
+      },
+  
+      undo: function() {
+        if (this.darkroom.transformations.length === 0) {
+          return;
+        }
+  
+        var lastTransformation = this.darkroom.transformations.pop();
+        this.undoTransformations.unshift(lastTransformation);
+  
+        this.darkroom.reinitializeImage();
+        this._updateButtons();
+      },
+  
+      redo: function() {
+        if (this.undoTransformations.length === 0) {
+          return;
+        }
+  
+        var cancelTransformation = this.undoTransformations.shift();
+        this.darkroom.transformations.push(cancelTransformation);
+  
+        this.darkroom.reinitializeImage();
+        this._updateButtons();
+      },
+  
+      _initButtons: function() {
+        var buttonGroup = this.darkroom.toolbar.createButtonGroup();
+  
+        this.backButton = buttonGroup.createButton({
+          image: 'fa fa-step-backward',
+          disabled: true,
+          editOnly: true,
+        });
+  
+        this.forwardButton = buttonGroup.createButton({
+          image: 'fa fa-step-forward',
+          disabled: true,
+          editOnly: true,
+        });
+  
+        this.backButton.addEventListener('click', this.undo.bind(this));
+        this.forwardButton.addEventListener('click', this.redo.bind(this));
+  
+        return this;
+      },
+  
+      _updateButtons: function() {
+        this.backButton.disable((this.darkroom.transformations.length === 0))
+        this.forwardButton.disable((this.undoTransformations.length === 0))
+      },
+  
+      _onTranformationApplied: function() {
+        this.undoTransformations = [];
+        this._updateButtons();
+      }
+    });
+    
+  };
+    
+  return {DarkroomPluginHistory: DarkroomPluginHistory};
+  
+});
--- a/web_widget_darkroom/static/src/js/plugins/darkroom.rotate.js
+++ b/web_widget_darkroom/static/src/js/plugins/darkroom.rotate.js
@ -0,0 +1,70 @@
+/* Adapted from https://github.com/MattKetmo/darkroomjs/tree/master/lib/js/plugins
+ * License https://github.com/MattKetmo/darkroomjs/blob/master/LICENSE
+ */
+
+odoo.define('web_widget_darkroom.darkroom_rotate', function(require){
+  
+  'use strict';
+  
+  var DarkroomPluginRotate = function() {
+
+    var Rotation = Darkroom.Transformation.extend({
+      applyTransformation: function(canvas, image, next) {
+        var angle = (image.getAngle() + this.options.angle) % 360;
+        image.rotate(angle);
+    
+        var width, height;
+        height = Math.abs(image.getWidth()*(Math.sin(angle*Math.PI/180)))+Math.abs(image.getHeight()*(Math.cos(angle*Math.PI/180)));
+        width = Math.abs(image.getHeight()*(Math.sin(angle*Math.PI/180)))+Math.abs(image.getWidth()*(Math.cos(angle*Math.PI/180)));
+    
+        canvas.setWidth(width);
+        canvas.setHeight(height);
+    
+        canvas.centerObject(image);
+        image.setCoords();
+        canvas.renderAll();
+    
+        next();
+      }
+    });
+    
+    Darkroom.plugins['rotate'] = Darkroom.Plugin.extend({
+    
+      initialize: function InitDarkroomRotatePlugin() {
+        var buttonGroup = this.darkroom.toolbar.createButtonGroup();
+    
+        var leftButton = buttonGroup.createButton({
+          image: 'fa fa-undo oe_edit_only',
+          editOnly: true,
+        });
+    
+        var rightButton = buttonGroup.createButton({
+          image: 'fa fa-repeat oe_edit_only',
+          editOnly: true,
+        });
+    
+        leftButton.addEventListener('click', this.rotateLeft.bind(this));
+        rightButton.addEventListener('click', this.rotateRight.bind(this));
+      },
+    
+      rotateLeft: function rotateLeft() {
+        this.rotate(-90);
+      },
+    
+      rotateRight: function rotateRight() {
+        this.rotate(90);
+      },
+    
+      rotate: function rotate(angle) {
+        this.darkroom.applyTransformation(
+          new Rotation({angle: angle})
+        );
+      }
+    
+    });
+  
+  }
+
+  return {DarkroomPluginRotate: DarkroomPluginRotate};
+  
+});
--- a/web_widget_darkroom/static/src/js/plugins/darkroom.zoom.js
+++ b/web_widget_darkroom/static/src/js/plugins/darkroom.zoom.js
@ -0,0 +1,198 @@
+/* Copyright 2016 LasLabs Inc.
+ * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html).
+ */
+
+odoo.define('web_widget_darkroom.darkroom_zoom', function(require){
+
+  'use strict';
+
+  var DarkroomPluginZoom = function(){
+  
+    Darkroom.plugins['zoom'] = Darkroom.Plugin.extend({
+      
+      inZoom: false,
+      zoomLevel: 0,
+      zoomFactor: .1,
+      
+      initialize: function() {
+        var self = this;
+        var buttonGroup = this.darkroom.toolbar.createButtonGroup();
+        
+        this.zoomButton = buttonGroup.createButton({
+          image: 'fa fa-search',
+        })
+        this.zoomInButton = buttonGroup.createButton({
+          image: 'fa fa-plus',
+        })
+        this.zoomOutButton = buttonGroup.createButton({
+          image: 'fa fa-minus',
+        })
+        this.okButton = buttonGroup.createButton({
+          image: 'fa fa-check',
+          type: 'success',
+          hide: true,
+          editOnly: true,
+        });
+        this.cancelButton = buttonGroup.createButton({
+          image: 'fa fa-times',
+          type: 'danger',
+          hide: true
+        });
+        
+        // Buttons click
+        this.zoomButton.addEventListener('click', this.toggleZoom.bind(this));
+        this.zoomInButton.addEventListener('click', this.zoomIn.bind(this));
+        this.zoomOutButton.addEventListener('click', this.zoomOut.bind(this));
+        //this.okButton.addEventListener('click', this.saveZoom.bind(this));
+        this.cancelButton.addEventListener('click', this.releaseFocus.bind(this));
+    
+        // Canvas events
+        this.darkroom.canvas.on('mouse:down', this.onMouseDown.bind(this));
+        this.darkroom.canvas.on('mouse:move', this.onMouseMove.bind(this));
+        this.darkroom.canvas.on('mouse:up', this.onMouseUp.bind(this));
+        //this.darkroom.canvas.on('object:moving', this.onObjectMoving.bind(this));
+        //this.darkroom.canvas.on('object:scaling', this.onObjectScaling.bind(this));
+        $(this.darkroom.canvas.wrapperEl).on('mousewheel', function(event){
+          self.onMouseWheel(event);
+        });
+    
+        //fabric.util.addListener(fabric.document, 'keydown', this.onKeyDown.bind(this));
+        //fabric.util.addListener(fabric.document, 'keyup', this.onKeyUp.bind(this));
+        this.toggleElements(false);
+        
+      },
+      
+      toggleZoom: function() {
+        if (this.hasFocus()) {
+            this.releaseFocus();
+        } else {
+          this.requireFocus();
+        }
+      },
+      
+      hasFocus: function() {
+        return this.inZoom;
+      },
+      
+      releaseFocus: function() {
+        this.toggleElements(false);
+      },
+      
+      requireFocus: function() {
+        this.toggleElements(true);
+      },
+      
+      toggleElements: function(activate) {
+        if (activate === 'undefined') {
+            activate = !this.hasFocus();
+        }
+        this.zoomButton.active(!activate);
+        this.inZoom = activate;
+        this.zoomInButton.hide(!activate);
+        this.zoomOutButton.hide(!activate);
+        this.okButton.hide(!activate);
+        this.cancelButton.hide(!activate);
+        this.darkroom.canvas.default_cursor = activate ? "move" : "default";
+      },
+      
+      // Return fabric.Point object for center of canvas
+      getCenterPoint: function() {
+        var center = this.darkroom.canvas.getCenter();
+        return new fabric.Point(center.left, center.top);
+      },
+      
+      // Set internal zoom
+      setZoomLevel: function(factor, point) {
+        var zoomLevel = this.zoomLevel + factor;
+        if (zoomLevel < 0) zoomLevel = 0;
+        if (zoomLevel == this.zoomLevel) return false;
+        console.log('Setting zoom factor');
+        console.log(zoomLevel);
+        console.log(point);
+        if (point) {
+          var canvas = this.darkroom.canvas;
+          canvas.zoomToPoint(point, zoomLevel + 1); // Add one for zero index
+          this.zoomLevel = zoomLevel;
+        }
+        return true;
+      },
+      
+      getObjectBounds: function() {
+        var canvas = this.darkroom.canvas;
+        var objects = canvas.getObjects();
+        var top = 0, bottom = 0, left = 0, right = 0;
+        for (var idx in objects) {
+          var obj = objects[idx];
+          var objRight = obj.left + obj.getWidth();
+          var objBottom = obj.top + obj.getHeight();
+          if (obj.left < left) left = obj.left;
+          if (objRight > right) right = objRight;
+          if (obj.top < top) top = obj.top;
+          if (objBottom > bottom) bottom = objBottom;
+        }
+        return {
+          top: top,
+          bottom: bottom,
+          left: left,
+          right: right,
+          height: (bottom - top),
+          width: (right - left),
+        }
+      },
+      
+      zoomIn: function() {
+        return this.setZoomLevel(this.zoomFactor, this.getCenterPoint());
+      },
+      
+      zoomOut: function() {
+        return this.setZoomLevel(-this.zoomFactor, this.getCenterPoint());
+      },
+      
+      onMouseWheel: function(event) {
+        if (this.hasFocus() && event && event.originalEvent) {
+          var modifier = event.originalEvent.wheelDelta < 0 ? -1 : 1;
+          var pointer = this.darkroom.canvas.getPointer(event.originalEvent);
+          var mousePoint = new fabric.Point(pointer.x, pointer.y);
+          this.setZoomLevel(modifier * this.zoomFactor, mousePoint);
+          return event.preventDefault();
+        }
+      },
+      
+      onMouseDown: function(event) {
+        if (this.hasFocus()) {
+            this.panning = true;
+        }
+      },
+      
+      onMouseUp: function(event) {
+        this.panning = false;
+      },
+      
+      onMouseMove: function(event) {
+		if (this.panning && event && event.e) {
+          var delta = new fabric.Point(event.e.movementX,
+                                       event.e.movementY);
+          var canvas = this.darkroom.canvas;
+          var objBounds = this.getObjectBounds();
+          var newPoint = new fabric.Point(
+            -delta.x - canvas.viewportTransform[4],
+            -delta.y - canvas.viewportTransform[5]
+          )
+          if (newPoint.x < objBounds.left || newPoint.x > objBounds.right) {
+            return;
+          }
+          if (newPoint.y < objBounds.top || newPoint.y > objBounds.bottom) {
+            return;
+          }
+          canvas.absolutePan(newPoint);
+          //canvas.setCoords();
+        }
+      },
+      
+    });
+    
+  }
+  
+  return {DarkroomPluginZoom: DarkroomPluginZoom};
+
+});
--- a/web_widget_darkroom/static/src/js/widget_darkroom.js
+++ b/web_widget_darkroom/static/src/js/widget_darkroom.js
@ -0,0 +1,238 @@
+/* Copyright 2016 LasLabs Inc.
+ * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html).
+ */
+
+odoo.define('web_widget_darkroom.darkroom_widget', function(require){
+  "use strict";
+  
+  var core = require('web.core');
+  var common = require('web.form_common');
+  var session = require('web.session');
+  var utils = require('web.utils');
+  var framework = require('web.framework');
+  var crash_manager = require('web.crash_manager');
+  
+  var QWeb = core.qweb;
+  var _t = core._t;
+  
+  var FieldDarkroomImage = common.AbstractField.extend(common.ReinitializeFieldMixin, {
+    className: 'darkroom-widget',
+    template: 'FieldDarkroomImage',
+    placeholder: "/web/static/src/img/placeholder.png",
+    darkroom: null,
+    no_rerender: false,
+    
+    defaults: {
+      // Canvas initialization size
+      minWidth: 100,
+      minHeight: 100,
+      maxWidth: 700,
+      maxHeight: 500,
+    
+      // Plugins options
+      plugins: {
+        crop: {
+          minHeight: 50,
+          minWidth: 50,
+          ratio: 1
+        },
+      },
+      
+      // Post initialization method
+      initialize: function() {
+        // Active crop selection
+        // this.plugins['crop'].requireFocus();
+        // Add custom listener
+        // this.addEventListener('core:transformation', function() { /* ... */ });
+      }
+      
+    },
+    
+    init: function(field_manager, node) {
+      this._super(field_manager, node);
+      this.options = _.defaults(this.options, this.defaults);
+    },
+    
+    _init_darkroom_icons: function() {
+      var element = document.createElement('div');
+      element.id = 'darkroom-icons';
+      element.style.height = 0;
+      element.style.width = 0;
+      element.style.position = 'absolute';
+      element.style.visibility = 'hidden';
+      element.innerHTML = '<!-- inject:svg --><!-- endinject -->';
+      this.el.appendChild(element);
+    },
+    
+    _init_darkroom_plugins: function(){
+      require('web_widget_darkroom.darkroom_crop').DarkroomPluginCrop();
+      require('web_widget_darkroom.darkroom_history').DarkroomPluginHistory();
+      require('web_widget_darkroom.darkroom_rotate').DarkroomPluginRotate();
+      require('web_widget_darkroom.darkroom_zoom').DarkroomPluginZoom();
+    },
+
+    _init_darkroom: function() {
+      if (!this.darkroom) {
+        this._init_darkroom_icons();
+        this._init_darkroom_ui();
+        this._init_darkroom_plugins();
+      }
+    },
+    
+    _init_darkroom_ui: function() {
+
+      Darkroom.UI = {
+        Toolbar: Toolbar,
+        ButtonGroup: ButtonGroup,
+        Button: Button,
+      };
+      
+      // Toolbar object.
+      function Toolbar(element) {
+        this.element = element;
+      }
+      
+      Toolbar.prototype = {
+        createButtonGroup: function(options) {
+          var buttonGroup = document.createElement('div');
+          buttonGroup.className = 'darkroom-button-group';
+          this.element.appendChild(buttonGroup);
+      
+          return new ButtonGroup(buttonGroup);
+        }
+      };
+      
+      // ButtonGroup object.
+      function ButtonGroup(element) {
+        this.element = element;
+      }
+      
+      ButtonGroup.prototype = {
+        createButton: function(options) {
+          var defaults = {
+            image: 'fa fa-question-circle',
+            type: 'default',
+            group: 'default',
+            hide: false,
+            disabled: false,
+            editOnly: false,
+            addClass: '',
+          };
+      
+          options = Darkroom.Utils.extend(options, defaults);
+      
+          var buttonElement = document.createElement('button');
+          buttonElement.type = 'button';
+          buttonElement.className = 'darkroom-button darkroom-button-' + options.type;
+          buttonElement.innerHTML = '<i class="' + options.image + ' fa-2x"></i>';
+          if (options.editOnly) {
+            buttonElement.classList.add('oe_edit_only');
+          }
+          if (options.addClass) {
+            buttonElement.classList.add(options.addClass);
+          }
+          // buttonElement.innerHTML = '<svg class="darkroom-icon"><use xlink:href="#' + options.image + '" /></svg>';
+          this.element.appendChild(buttonElement);
+      
+          var button = new Button(buttonElement);
+          button.hide(options.hide);
+          button.disable(options.disabled);
+      
+          return button;
+        }
+      }
+      
+      // Button object.
+      function Button(element) {
+        this.element = element;
+      }
+      
+      Button.prototype = {
+        addEventListener: function(eventName, listener) {
+          if (this.element.addEventListener){
+            this.element.addEventListener(eventName, listener);
+          } else if (this.element.attachEvent) {
+            this.element.attachEvent('on' + eventName, listener);
+          }
+        },
+        removeEventListener: function(eventName, listener) {
+          if (this.element.removeEventListener){
+            this.element.removeEventListener(eventName, listener);
+          }
+        },
+        active: function(value) {
+          if (value){
+            this.element.classList.add('darkroom-button-active');
+            this.element.disabled = false;
+          } else {
+            this.element.classList.remove('darkroom-button-active');
+            this.element.disabled = true;
+          }
+        },
+        hide: function(value) {
+          if (value)
+            this.element.classList.add('hidden');
+          else
+            this.element.classList.remove('hidden');
+        },
+        disable: function(value) {
+          this.element.disabled = (value) ? true : false;
+        }
+      };
+      
+    },
+    
+    destroy_content: function() {
+      if (this.darkroom && this.darkroom.containerElement) {
+        this.darkroom.containerElement.remove();
+        this.darkroom = null;
+      }
+    },
+    
+    set_value: function(value){
+      this.destroy_content();
+      return this._super(value);
+    },
+    
+    render_value: function() {
+      this._init_darkroom();
+      var url;
+      if (this.get('value') && !utils.is_bin_size(this.get('value'))) {
+        url = 'data:image/png;base64,' + this.get('value');
+      } else if (this.get('value')) {
+        var id = JSON.stringify(this.view.datarecord.id || null);
+        var field = this.name;
+        if (this.options.preview_image)
+            field = this.options.preview_image;
+        url = session.url('/web/image', {
+          model: this.view.dataset.model,
+          id: id,
+          field: field,
+          unique: (this.view.datarecord.__last_update || '').replace(/[^0-9]/g, ''),
+        });
+      } else {
+        url = this.placeholder;
+      }
+      
+      var $img = $(QWeb.render("FieldBinaryImage-img", { widget: this, url: url }));
+      this.$el.find('> img').remove();
+      this.$el.append($img);
+      this.darkroom = new Darkroom($img.get(0), this.options);
+      this.darkroom.widget = this;
+    },
+    
+    commit_value: function(callback) {
+      this.set_value(
+        this.darkroom.sourceImage.toDataURL().split(',')[1]
+      );
+    },
+    
+  });
+  
+  core.form_widget_registry.add("darkroom", FieldDarkroomImage);
+  
+  return {
+    FieldDarkroomImage: FieldDarkroomImage,
+  }
+  
+});
--- a/web_widget_darkroom/static/src/js/widget_darkroom.js.orig
+++ b/web_widget_darkroom/static/src/js/widget_darkroom.js.orig
@ -0,0 +1,246 @@
+/* © 2016-TODAY LasLabs Inc.
+ * License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
+ */
+
+odoo.define('web_widget_darkroom.darkroom_widget', function(require){
+  "use strict";
+  
+  var core = require('web.core');
+  var common = require('web.form_common');
+  var session = require('web.session');
+  var utils = require('web.utils');
+  var framework = require('web.framework');
+  var crash_manager = require('web.crash_manager');
+  
+  var QWeb = core.qweb;
+  var _t = core._t;
+  
+  var FieldDarkroomImage = common.AbstractField.extend(common.ReinitializeFieldMixin, {
+    className: 'darkroom-widget',
+    template: 'FieldDarkroomImage',
+    placeholder: "/web/static/src/img/placeholder.png",
+    darkroom: null,
+    no_rerender: false,
+    
+    _init_darkroom_icons: function() {
+      var element = document.createElement('div');
+      element.id = 'darkroom-icons';
+      element.style.height = 0;
+      element.style.width = 0;
+      element.style.position = 'absolute';
+      element.style.visibility = 'hidden';
+      element.innerHTML = '<!-- inject:svg --><!-- endinject -->';
+      this.el.appendChild(element);
+    },
+    
+    _init_darkroom_plugins: function(){
+      require('web_widget_darkroom.darkroom_crop').DarkroomPluginCrop();
+      require('web_widget_darkroom.darkroom_history').DarkroomPluginHistory();
+      require('web_widget_darkroom.darkroom_rotate').DarkroomPluginRotate();
+      require('web_widget_darkroom.darkroom_zoom').DarkroomPluginZoom();
+      require('web_widget_darkroom.darkroom_save').DarkroomPluginSave();
+    },
+
+    _init_darkroom_ui: function() {
+
+      this._init_darkroom_icons();
+    
+      Darkroom.UI = {
+        Toolbar: Toolbar,
+        ButtonGroup: ButtonGroup,
+        Button: Button,
+      };
+      
+      // Toolbar object.
+      function Toolbar(element) {
+        this.element = element;
+      }
+      
+      Toolbar.prototype = {
+        createButtonGroup: function(options) {
+          var buttonGroup = document.createElement('div');
+          buttonGroup.className = 'darkroom-button-group';
+          this.element.appendChild(buttonGroup);
+      
+          return new ButtonGroup(buttonGroup);
+        }
+      };
+      
+      // ButtonGroup object.
+      function ButtonGroup(element) {
+        this.element = element;
+      }
+      
+      ButtonGroup.prototype = {
+        createButton: function(options) {
+          var defaults = {
+            image: 'fa fa-question-circle',
+            type: 'default',
+            group: 'default',
+            hide: false,
+            disabled: false,
+            editOnly: false,
+            addClass: '',
+          };
+      
+          options = Darkroom.Utils.extend(options, defaults);
+      
+          var buttonElement = document.createElement('button');
+          buttonElement.type = 'button';
+          buttonElement.className = 'darkroom-button darkroom-button-' + options.type;
+          buttonElement.innerHTML = '<i class="' + options.image + ' fa-2x"></i>';
+          if (options.editOnly) {
+            buttonElement.classList.add('oe_edit_only');
+          }
+<<<<<<< Updated upstream
+          if (options.addClass) {
+            buttonElement.classList.add(options.addClass);
+          }
+          // buttonElement.innerHTML = '<svg class="darkroom-icon"><use xlink:href="#' + options.image + '" /></svg>';
+=======
+>>>>>>> Stashed changes
+          this.element.appendChild(buttonElement);
+      
+          var button = new Button(buttonElement);
+          button.hide(options.hide);
+          button.disable(options.disabled);
+      
+          return button;
+        }
+      }
+      
+      // Button object.
+      function Button(element) {
+        this.element = element;
+      }
+      
+      Button.prototype = {
+        addEventListener: function(eventName, listener) {
+          if (this.element.addEventListener){
+            this.element.addEventListener(eventName, listener);
+          } else if (this.element.attachEvent) {
+            this.element.attachEvent('on' + eventName, listener);
+          }
+        },
+        removeEventListener: function(eventName, listener) {
+          if (this.element.removeEventListener){
+            this.element.removeEventListener(eventName, listener);
+          }
+        },
+        active: function(value) {
+          if (value){
+            this.element.classList.add('darkroom-button-active');
+            this.element.disabled = false;
+          } else {
+            this.element.classList.remove('darkroom-button-active');
+            this.element.disabled = true;
+          }
+        },
+        hide: function(value) {
+          if (value)
+            this.element.classList.add('hidden');
+          else
+            this.element.classList.remove('hidden');
+        },
+        disable: function(value) {
+          this.element.disabled = (value) ? true : false;
+        }
+      };
+      
+    },
+    
+    destroy_content: function() {
+      console.log('Destroying Darkroom Obj');
+      this.darkroom.selfDestroy();
+    },
+    
+    render_value: function() {
+      console.log('Rerendering');
+      var url;
+      if (this.get('value') && !utils.is_bin_size(this.get('value'))) {
+        url = 'data:image/png;base64,' + this.get('value');
+      } else if (this.get('value')) {
+        var id = JSON.stringify(this.view.datarecord.id || null);
+        var field = this.name;
+        if (this.options.preview_image)
+            field = this.options.preview_image;
+        url = session.url('/web/image', {
+          model: this.view.dataset.model,
+          id: id,
+          field: field,
+          unique: (this.view.datarecord.__last_update || '').replace(/[^0-9]/g, ''),
+        });
+      } else {
+        url = this.placeholder;
+      }
+      
+      var $img = $(QWeb.render("FieldBinaryImage-img", { widget: this, url: url }));
+      this.$el.find('> img').remove();
+      this.$el.append($img);
+      
+      if (!this.darkroom) {
+        this._init_darkroom_ui();
+        this._init_darkroom_plugins();
+      }
+      this.darkroom = new Darkroom($img.get(0));
+      this.darkroom.widget = this;
+    },
+    
+    on_save_as: function(e) {
+      
+      framework.blockUI();
+      var value = this.darkroom.sourceImage.toDataURL();
+      var c = crash_manager;
+      var filename_fieldname = this.node.attrs.filename;
+      var filename_field = this.view.fields && this.view.fields[filename_fieldname];
+      
+      var filereader = new FileReader();
+      filereader.onload = function(upload) {
+        var data = upload.target.result;
+        data = data.split(',')[1];
+        $.post({
+          url: '/web/binary/upload',
+          
+        })
+      };
+      filereader.readAsDataURL(new Blob(value));
+      
+      this.$el.find('form.o_form_darkroom_form input[name=ufile]').val(value);
+      this.$el.find('form.o_form_darkroom_form input[name=session_id]').val(this.session.session_id);
+      this.$el.find('form.o_form_darkroom_form').submit();
+      
+      var $form = $(parentEl).find('form');
+      $form.find('input[name=ufile]').val(value);
+    
+    },
+    
+    init: function(field_manager, node) {
+        var self = this;
+        this._super(field_manager, node);
+        this.binary_value = false;
+        this.useFileAPI = !!window.FileReader;
+        this.max_upload_size = 25 * 1024 * 1024; // 25Mo
+        if (!this.useFileAPI) {
+            this.fileupload_id = _.uniqueId('oe_fileupload');
+            $(window).on(this.fileupload_id, function() {
+                var args = [].slice.call(arguments).slice(1);
+                self.on_file_uploaded.apply(self, args);
+            });
+        }
+    },
+    stop: function() {
+        if (!this.useFileAPI) {
+            $(window).off(this.fileupload_id);
+        }
+        this._super.apply(this, arguments);
+    },
+    
+  });
+  
+  core.form_widget_registry.add("darkroom", FieldDarkroomImage);
+  
+  return {
+    FieldDarkroomImage: FieldDarkroomImage,
+  }
+  
+});
--- a/web_widget_darkroom/static/src/xml/field_templates.xml
+++ b/web_widget_darkroom/static/src/xml/field_templates.xml
@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!--
+    Copyright 2016 LasLabs Inc.
+    License LGPL-3 or later (http://www.gnu.org/licenses/lgpl.html).
+-->
+
+<templates id="field_templates" xml:space="preserve">
+    <t t-name="FieldDarkroomImage">
+        <span class="oe_form_field o_form_field_darkroom"
+              t-att-style="widget.node.attrs.style">
+            <t t-if="!widget.get('effective_readonly')">
+                <div class="darkroom-toolbar" />
+            </t>
+        </span>
+    </t>
+</templates>
--- a/web_widget_darkroom/views/assets.xml
+++ b/web_widget_darkroom/views/assets.xml
@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!--
+    Copyright 2016 LasLabs Inc.
+    License LGPL-3 or later (http://www.gnu.org/licenses/lgpl.html).
+-->
+
+<odoo>
+    <template id="assets_darkroom" name="web_widget_darkroom Assets" inherit_id="web.assets_backend">
+        <xpath expr="//script[last()]" position="after">
+            <!--<link href="/web_widget_darkroom/static/lib/darkroomjs/build/darkroom.css" rel="stylesheet" type="text/css" />-->
+            <link href="/web_widget_darkroom/static/src/css/darkroom.css" rel="stylesheet" type="text/css" />
+            <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.require.min.js" />
+            
+            <script src="/web_widget_darkroom/static/lib/darkroomjs/lib/js/core/darkroom.js" />
+            <script src="/web_widget_darkroom/static/lib/darkroomjs/lib/js/core/plugin.js" />
+            <script src="/web_widget_darkroom/static/lib/darkroomjs/lib/js/core/transformation.js" />
+            <!--<script src="/web_widget_darkroom/static/lib/darkroomjs/lib/js/core/ui.js" />-->
+            <script src="/web_widget_darkroom/static/lib/darkroomjs/lib/js/core/utils.js" />
+            
+            <script src="/web_widget_darkroom/static/src/js/plugins/darkroom.crop.js" />
+            <script src="/web_widget_darkroom/static/src/js/plugins/darkroom.history.js" />
+            <script src="/web_widget_darkroom/static/src/js/plugins/darkroom.rotate.js" />
+            <script src="/web_widget_darkroom/static/src/js/plugins/darkroom.save.js" />
+            <script src="/web_widget_darkroom/static/src/js/plugins/darkroom.zoom.js" />
+            
+            <script src="/web_widget_darkroom/static/src/js/widget_darkroom.js" />
+            
+        </xpath>
+    </template>
+</odoo>