image_cropper 1.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 2e153fbfc633756a6098169bdb4c5e8e7b7f94b8
+  data.tar.gz: c1ea8b304c8ed45b56c204ed4ae40005add49760
+SHA512:
+  metadata.gz: a75b951de33ab1038173d78d0f6a258ffe0acb9442a00ab17787bc9f8153827b43ef46a3a593adfb9fac34c0737a5722b26e9055240a77c1289f71210118b06d
+  data.tar.gz: 7708f4b822e256822940d02495f2b57c41e4356ef4be3762c80b2a44c1bf872196f6b2336d38491bf60ae5cd9d8b0732f09137959fe82385c1a269319a00ea7b

data/README.md

@@ -0,0 +1,228 @@
+# image_cropper
+
+Combine upload images with a cropper
+
+
+## Features
+
+* Previews image before upload
+* Considers carrierwave cache (when form return with error)
+* Responsive
+* Real crop (generate 2 files, and in case of circle frame, effectively crop an circular image)
+
+## Dependencies
+
+* Gem [jquery-rails](https://github.com/rails/jquery-rails)
+* Gem [CarrierWave](https://github.com/carrierwaveuploader/carrierwave) to upload files
+* Gem [RMagick](https://github.com/rmagick/rmagick) to crop images
+* Gem [font-awesome-rails](https://github.com/bokmann/font-awesome-rails) to show pretty icons
+
+
+___
+
+
+# Getting Started
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'image_cropper', git: 'git@gitlab.snappler.com:gems/image_cropper.git'
+```
+
+And then execute:
+
+    $ bundle install
+
+
+Finally run:
+
+    rails g image_cropper:install
+
+This one generate the default null image **'app/assets/images/image_cropper/default.png'** used to show when the image window don't have one (later you can modify if you need)
+
+## Create/Update the Uploader
+
+Start off by [generating an uploader](https://github.com/carrierwaveuploader/carrierwave#user-content-getting-started) or modify if you already get one: 
+
+Using "Image" as an example, you should have a file
+
+    app/uploaders/image_uploader.rb
+
+Add these lines and leave it like this:
+
+```ruby
+class ImageUploader < CarrierWave::Uploader::Base
+  
+  #If you need to define another/s columns, just define in class 
+  #this methods and puts in th array, but it's no necesary and take :file as default
+  #def self.mount_uploader_columns
+  #  [:file]
+  #end
+  
+  #Include the functionality of the gem
+  include ImageCropper::Uploader
+
+  storage :file
+
+  def store_dir
+    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
+  end
+end
+```
+
+
+
+
+
+## Update Model
+
+As an example I use a dummy model **User**:
+    
+    $ rails g scaffold User name
+
+Then integrate with [Carrierwave generating the column that it need](https://github.com/carrierwaveuploader/carrierwave#user-content-activerecord)
+_(In the example of carrierwave use **avatar** as column, in this one I choose **file** as column because is more pretty :P)_
+
+
+
+Now, add fields to the model you want to mount the uploader by executing:
+
+    $ rails g image_cropper:migrate User
+
+This generate a file **XXXXXXXXXXXXXX_image_cropper_add_fields_to_users.rb**
+
+```ruby
+class ImageCropperAddFieldsToUsers < ActiveRecord::Migration
+  def change
+    #Used to crop file
+    add_column :users, :coord_x, :float, default: 0
+    add_column :users, :coord_y, :float, default: 0
+    add_column :users, :coord_w, :float, default: 0
+    add_column :users, :coord_h, :float, default: 0
+    add_column :users, :coord_z, :float, default: 1
+    add_column :users, :frame, :string, default: 'square' 
+  end
+end
+   
+```
+
+Then execute:
+
+```ruby
+  rake db:migrate
+```
+
+
+Open your model file and add these line:
+
+```ruby
+class User < ActiveRecord::Base
+  include ImageCropper::Model
+  mount_uploader :file, ImageUploader
+end
+```
+
+
+## Require Assets (Css/Js)
+
+Include the following in your javascript manifest:
+
+```javascript
+//= require jquery
+//= require image_cropper
+```
+
+And the following in your stylesheet manifest:
+
+```css
+ *= require font-awesome
+ *= require image_cropper
+```
+(for the moment font-awesome is dependency and you need to require)
+
+
+# Using
+
+Now you're able to use it in forms:
+
+```erb
+<div style='max-width: 400px;'>
+<%= f.image_cropper_field :file %>
+</div>
+```
+
+If you need to save remote image, you need to set value in the hidden field and trigger 'change'
+```js
+$('.image-cropper-file-url').val('https://www.gettyimages.es/gi-resources/images/Embed/new/embed2.jpg').trigger('change');
+```
+
+
+remember put the property 'multipart' to form when you use image_cropper:
+
+```erb
+<%= form_with(model: user, local: true, html: {multipart: true}) do |form| %>
+```
+
+And add to strong parameters the fields 
+
+```ruby
+params.require(:user).permit(:name, :coord_x, :coord_y, :coord_w, :coord_h, :coord_z, :frame, :file, :file_cache, :remote_file_url)
+```
+**(Is very important the orden of these params, always leave the :file_cache, and :file to the end)**
+
+
+
+And in a show view:
+
+```erb
+<div style='max-width: 400px;'>
+    <%= image_tag @user.file.thumb.url, class: 'image-cropper' %>
+</div>
+```
+
+You can send some params
+
+* aspect_ratio
+* frame
+* operation_object
+* destroyable
+* destroy_class
+* destroy_confirm
+
+| Params           | Type          | Default                         | Options                                | Description                                                                  |
+| ---------------- |:-------------:|:-------------------------------:|:--------------------------------------:|-----------------------------------------------------------------------------:|
+| aspect_ratio     | _(string)_    | **'4:3'**                       | any combination of **'number:number'** | 4:4 are perfect square, 4:3 rectangle horizontal, 3:4 rectangle vertical     |
+| frame            | _(string)_    | **'square'**                    | **'square'** or **'circle'**           | frame of image, if you want a circle o square frame                          |
+| operation_object | _(object)_    | **self**                        | any **object**                         | maybe the object where mount the uploader it's not the one you want to erase |            
+| destroyable      | _(boolean)_   | **false**                       | **true** or **false**                  | If you want a button to remove object with nested_attributes                 |
+| destroy_class    | _(string)_    | **'.image-cropper-container'**  | a class or id of containter            | Is the container that disapear when you click remove                         |
+| destroy_confirm  | _(string)_    | **'Are you sure?'**             | any message you want                   | message to display to confirm to remove the image                            |
+
+
+___
+
+
+## Features to the future
+* Make test
+* Problem with gif when crop area, not resize - **SOLVED**
+* Problem with jpg, jpeg, circular crop - **NOT ALOW, JPG AND JPEG CAN'T CIRCULAR CROP**
+
+## Thanks!
+
+RubyGems
+
+Esta gema está publicada en [RubyGems](https://rubygems.org/gems/image_cropper) bajo el user juan.labattaglia@snappler.com
+
+
+## Actualización
+
+Una vez que hay una nueva versión, modificar `lib/image_cropper/version.rb`
+
+Y luego ejecutar:
+
+```shell
+gem build image_cropper.gemspec
+gem push image_cropper-[VERSION].gem
+```

data/app/assets/javascript/image_cropper.js

@@ -0,0 +1,688 @@
+
+(function ( $ ) {
+
+  $.fn.image_cropper = function( options ) {
+
+    var settings = $.extend({
+    }, options );
+
+            //-------------------------- Definitions
+            //Containers
+            var image_cropper_container = $(this);
+            var image_cropper_crop_container = image_cropper_container.find('.image-cropper-crop-container');
+
+            //Components
+            var image_cropper_crop = image_cropper_container.find('.image-cropper-crop');
+            var image_cropper_file = image_cropper_container.find('.image-cropper-file');
+            var image_cropper_file_cache = image_cropper_container.find('.image-cropper-file-cache');
+            var image_cropper_file_url = image_cropper_container.find('.image-cropper-file-url');
+
+            //Coords
+            var coord_x = image_cropper_container.find('.coord-x');
+            var coord_y = image_cropper_container.find('.coord-y');
+            var coord_z = image_cropper_container.find('.coord-z');
+            var coord_w = image_cropper_container.find('.coord-w');
+            var coord_h = image_cropper_container.find('.coord-h');
+
+            //Buttons
+            var image_cropper_file_trigger = image_cropper_container.find('.image-cropper-file-trigger');
+            var coord_zoom_in = image_cropper_container.find('.image-cropper-zoom-in');
+            var coord_zoom_out = image_cropper_container.find('.image-cropper-zoom-out');
+            var image_cropper_remove = image_cropper_container.find('.image-cropper-remove');
+
+            //Aux vars
+            var coord_x_val, coord_y_val, coord_z_val, aspect_ratio, aspect_ratio_arr, w_val, h_val, coord_w_val, coord_h_val;
+
+
+
+            var image_cropper_initialize_vars = function(){
+
+
+                //Set image_cropper active
+                image_cropper_container.addClass('active');
+
+                //Get X,Y,W,H,Z
+                coord_x_val = parseFloat(coord_x.val());
+                if (isNaN(coord_x_val)){
+                  coord_x_val = 0;
+                }
+                
+                coord_y_val = parseFloat(coord_y.val());
+                if (isNaN(coord_y_val)){
+                  coord_y_val = 0;
+                }
+                coord_z_val = parseFloat(coord_z.val());
+                if (isNaN(coord_z_val)){
+                  coord_z_val = 1;
+                }
+
+                aspect_ratio = image_cropper_container.data('aspect-ratio');
+
+                if (aspect_ratio === undefined){
+                  aspect_ratio = '4:3';
+                }
+
+                aspect_ratio_arr = aspect_ratio.split(':');
+                w_val = parseFloat(aspect_ratio_arr[0]);
+                if (isNaN(w_val)){
+                  w_val = 4;
+                }
+                h_val = parseFloat(aspect_ratio_arr[1]);
+                if (isNaN(h_val)){
+                  h_val = 3;
+                }
+                coord_w_val = w_val * 160;
+                coord_h_val = h_val * 160;
+
+
+                //Define Crop
+                image_cropper_crop.guillotine({
+                  width: coord_w_val,
+                  height: coord_h_val,
+                  init: { scale: coord_z_val, x: coord_x_val, y: coord_y_val },
+                  onChange: function(data, action){
+                    coord_x.val(data.x);
+                    coord_y.val(data.y);
+                    coord_w.val(data.w);
+                    coord_h.val(data.h);
+                    coord_z.val(data.scale);
+                  }
+                });
+
+
+                if ((settings['enabled'] !== undefined) && (settings['enabled'] === false)){
+                  image_cropper_crop.guillotine('disable');
+                  image_cropper_crop_container.addClass('disable');
+                }
+
+                //Initialize
+                data = image_cropper_crop.guillotine('getData');
+                coord_x.val(data.x);
+                coord_y.val(data.y);
+                coord_w.val(data.w);
+                coord_h.val(data.h);
+                coord_z.val(data.scale);
+            }
+
+            var image_cropper_initialize_events = function(){
+
+
+                //remove image
+                image_cropper_remove.off('click');
+                image_cropper_remove.on('click', function() {
+                  if (confirm($(this).data('destroy-confirm'))) {
+                    $(this).prev('input[type=hidden]').val('1');
+
+                    $(this).closest(settings['destroy_class']).fadeOut(function(){
+                      $(this).hide();
+                    });
+                  }   
+                });
+
+
+                //Upload image
+                image_cropper_file_trigger.off('click');
+                image_cropper_file_trigger.on('click', function() {
+                  image_cropper_file.trigger('click');
+                });
+
+                //When change input file show img 
+                image_cropper_file.off('change');
+                image_cropper_file.on('change', function() {
+                  if (this.files && this.files[0]) {
+                    //image_cropper_file_binary.val('');
+                    var reader = new FileReader;
+                    reader.onload = function(e) {
+                      set_image(e.target.result);
+                      image_cropper_file_url.val('');
+                      image_cropper_file_cache.val('');
+                    };
+                    reader.readAsDataURL(this.files[0]);
+                  }
+                });
+
+                
+                //When change input url show img 
+                image_cropper_file_url.off('change');
+                image_cropper_file_url.on('change', function() {
+                  if ($(this).val() != '') {
+                    set_image($(this).val());
+                    image_cropper_file.val('');
+                    image_cropper_file_cache.val('');
+                  }
+                });
+
+
+                //Zoom in
+                coord_zoom_in.off('click');
+                coord_zoom_in.on('click', function() {
+                  image_cropper_crop.guillotine('zoomIn');
+                });
+
+                //Zoom out
+                coord_zoom_out.off('click');
+                coord_zoom_out.on('click', function() {
+                  image_cropper_crop.guillotine('zoomOut');
+                });
+
+                //Scrolling Zoom
+                image_cropper_crop.off('DOMMouseScroll mousewheel');
+                image_cropper_crop.on('DOMMouseScroll mousewheel', function (event) {
+                  var guillotine = image_cropper_crop.guillotine('instance');
+                  if(guillotine !== undefined){
+                    if( event.originalEvent.detail > 0 || event.originalEvent.wheelDelta < 0 ) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY
+                      image_cropper_crop.guillotine('zoomOut');
+                    } else {
+                      image_cropper_crop.guillotine('zoomIn');
+                    }
+                  }
+                  return false;
+                });
+
+                
+              }
+
+
+              var set_image = function(data_uri){
+                var i;
+                image_cropper_crop.guillotine('remove');
+                image_cropper_crop.attr('src', data_uri);
+                coord_x.val('');
+                coord_y.val('');
+                coord_w.val('');
+                coord_h.val('');
+                coord_z.val('');
+                settings['enabled'] = true;
+                image_cropper_crop.guillotine('enable');
+                image_cropper_crop_container.removeClass('disable');
+
+                i = new Image();
+                i.src = data_uri;
+                i.onload = function() {
+                //alert(i.naturalWidth + ' x ' + i.naturalHeight);
+                image_cropper_initialize_vars();
+              };
+            }
+
+
+
+
+            //-------------------------- Initialize
+            //alert(image_cropper_container.hasClass('active'));
+            if(!image_cropper_container.hasClass('active')){
+              var i;
+              i = new Image();
+              i.src = image_cropper_crop.attr('src');       
+              i.onload = function(e) {
+                image_cropper_initialize_events();                            
+                image_cropper_initialize_vars();
+              };
+            }
+          
+
+};
+
+}( jQuery ));
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// Generated by CoffeeScript 1.8.0
+
+/*
+ * jQuery Guillotine Plugin v1.3.1
+ * http://matiasgagliano.github.com/guillotine/
+ *
+ * Copyright 2014, Matías Gagliano.
+ * Dual licensed under the MIT or GPLv3 licenses.
+ * http://opensource.org/licenses/MIT
+ * http://opensource.org/licenses/GPL-3.0
+ *
+ */
+
+ (function() {
+  "use strict";
+  var $, Guillotine, canTransform, defaults, events, getPointerPosition, hardwareAccelerate, isTouch, pluginName, scope, touchRegExp, validEvent, whitelist,
+  __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
+  __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
+
+  $ = jQuery;
+
+  pluginName = 'guillotine';
+
+  scope = 'guillotine';
+
+  events = {
+    start: "touchstart." + scope + " mousedown." + scope,
+    move: "touchmove." + scope + " mousemove." + scope,
+    stop: "touchend." + scope + " mouseup." + scope
+  };
+
+  defaults = {
+    width: 400,
+    height: 300,
+    zoomStep: 0.1,
+    init: null,
+    eventOnChange: null,
+    onChange: null
+  };
+
+  touchRegExp = /touch/i;
+
+  isTouch = function(e) {
+    return touchRegExp.test(e.type);
+  };
+
+  validEvent = function(e) {
+    if (isTouch(e)) {
+      return e.originalEvent.changedTouches.length === 1;
+    } else {
+      return e.which === 1;
+    }
+  };
+
+  getPointerPosition = function(e) {
+    if (isTouch(e)) {
+      e = e.originalEvent.touches[0];
+    }
+    return {
+      x: e.pageX,
+      y: e.pageY
+    };
+  };
+
+  canTransform = function() {
+    var hasTransform, helper, prefix, prefixes, prop, test, tests, value, _i, _len;
+    hasTransform = false;
+    prefixes = ['webkit', 'Moz', 'O', 'ms', 'Khtml'];
+    tests = {
+      transform: 'transform'
+    };
+    for (_i = 0, _len = prefixes.length; _i < _len; _i++) {
+      prefix = prefixes[_i];
+      tests[prefix + 'Transform'] = '-' + prefix.toLowerCase() + '-transform';
+    }
+    helper = document.createElement('img');
+    document.body.insertBefore(helper, null);
+    for (test in tests) {
+      prop = tests[test];
+      if (helper.style[test] === void 0) {
+        continue;
+      }
+      helper.style[test] = 'rotate(90deg)';
+      value = window.getComputedStyle(helper).getPropertyValue(prop);
+      if ((value != null) && value.length && value !== 'none') {
+        hasTransform = true;
+        break;
+      }
+    }
+    document.body.removeChild(helper);
+    canTransform = hasTransform ? (function() {
+      return true;
+    }) : (function() {
+      return false;
+    });
+    return canTransform();
+  };
+
+  hardwareAccelerate = function(el) {
+    return $(el).css({
+      '-webkit-perspective': 1000,
+      'perspective': 1000,
+      '-webkit-backface-visibility': 'hidden',
+      'backface-visibility': 'hidden'
+    });
+  };
+
+  Guillotine = (function() {
+    function Guillotine(element, options) {
+      this._drag = __bind(this._drag, this);
+      this._unbind = __bind(this._unbind, this);
+      this._start = __bind(this._start, this);
+      this.op = $.extend(true, {}, defaults, options, $(element).data(pluginName));
+      this.enabled = true;
+      this.zoomInFactor = 1 + this.op.zoomStep;
+      this.zoomOutFactor = 1 / this.zoomInFactor;
+      this.glltRatio = this.op.height / this.op.width;
+      this.width = this.height = this.left = this.top = this.angle = 0;
+      this.data = {
+        scale: 1,
+        angle: 0,
+        x: 0,
+        y: 0,
+        w: this.op.width,
+        h: this.op.height
+      };
+      this._wrap(element);
+      if (this.op.init != null) {
+        this._init();
+      }
+      if (this.width < 1 || this.height < 1) {
+        this._fit() && this._center();
+      }
+      hardwareAccelerate(this.$el);
+      this.$el.on(events.start, this._start);
+    }
+
+    Guillotine.prototype._wrap = function(element) {
+      var canvas, el, guillotine, height, paddingTop, width;
+      el = $(element);
+      if (element.tagName === 'IMG') {
+        if (element.naturalWidth) {
+          width = element.naturalWidth;
+          height = element.naturalHeight;
+        } else {
+          el.addClass('guillotine-sample');
+          width = el.width();
+          height = el.height();
+          el.removeClass('guillotine-sample');
+        }
+      } else {
+        width = el.width();
+        height = el.height();
+      }
+      this.width = width / this.op.width;
+      this.height = height / this.op.height;
+      canvas = $('<div>').addClass('guillotine-canvas');
+      canvas.css({
+        width: this.width * 100 + '%',
+        height: this.height * 100 + '%',
+        top: 0,
+        left: 0
+      });
+      canvas = el.wrap(canvas).parent();
+      paddingTop = this.op.height / this.op.width * 100 + '%';
+      guillotine = $('<div>').addClass('guillotine-window');
+      guillotine.css({
+        width: '100%',
+        height: 'auto',
+        'padding-top': paddingTop
+      });
+      guillotine = canvas.wrap(guillotine).parent();
+      this.$el = el;
+      this.el = el[0];
+      this.$canvas = canvas;
+      this.canvas = canvas[0];
+      this.$gllt = guillotine;
+      this.gllt = guillotine[0];
+      this.$document = $(element.ownerDocument);
+      return this.$body = $('body', this.$document);
+    };
+
+    Guillotine.prototype._unwrap = function() {
+      this.$el.removeAttr('style');
+      this.$el.insertBefore(this.gllt);
+      return this.$gllt.remove();
+    };
+
+    Guillotine.prototype._init = function() {
+      var angle, o, scale;
+      o = this.op.init;
+      if ((scale = parseFloat(o.scale))) {
+        this._zoom(scale);
+      }
+      if ((angle = parseInt(o.angle))) {
+        this._rotate(angle);
+      }
+      return this._offset(parseInt(o.x) / this.op.width || 0, parseInt(o.y) / this.op.height || 0);
+    };
+
+    Guillotine.prototype._start = function(e) {
+      if (!(this.enabled && validEvent(e))) {
+        return;
+      }
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      this.p = getPointerPosition(e);
+      return this._bind();
+    };
+
+    Guillotine.prototype._bind = function() {
+      this.$body.addClass('guillotine-dragging');
+      this.$document.on(events.move, this._drag);
+      return this.$document.on(events.stop, this._unbind);
+    };
+
+    Guillotine.prototype._unbind = function(e) {
+      this.$body.removeClass('guillotine-dragging');
+      this.$document.off(events.move, this._drag);
+      this.$document.off(events.stop, this._unbind);
+      if (e != null) {
+        return this._trigger('drag');
+      }
+    };
+
+    Guillotine.prototype._trigger = function(action) {
+      if (this.op.eventOnChange != null) {
+        this.$el.trigger(this.op.eventOnChange, [this.data, action]);
+      }
+      if (typeof this.op.onChange === 'function') {
+        return this.op.onChange.call(this.el, this.data, action);
+      }
+    };
+
+    Guillotine.prototype._drag = function(e) {
+      var dx, dy, left, p, top;
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      p = getPointerPosition(e);
+      dx = p.x - this.p.x;
+      dy = p.y - this.p.y;
+      this.p = p;
+      left = dx === 0 ? null : this.left - dx / this.gllt.clientWidth;
+      top = dy === 0 ? null : this.top - dy / this.gllt.clientHeight;
+      return this._offset(left, top);
+    };
+
+    Guillotine.prototype._offset = function(left, top) {
+      if (left || left === 0) {
+        if (left < 0) {
+          left = 0;
+        }
+        if (left > this.width - 1) {
+          left = this.width - 1;
+        }
+        this.canvas.style.left = (-left * 100).toFixed(2) + '%';
+        this.left = left;
+        this.data.x = Math.round(left * this.op.width);
+      }
+      if (top || top === 0) {
+        if (top < 0) {
+          top = 0;
+        }
+        if (top > this.height - 1) {
+          top = this.height - 1;
+        }
+        this.canvas.style.top = (-top * 100).toFixed(2) + '%';
+        this.top = top;
+        return this.data.y = Math.round(top * this.op.height);
+      }
+    };
+
+    Guillotine.prototype._zoom = function(factor) {
+      var h, left, top, w;
+      if (factor <= 0 || factor === 1) {
+        return;
+      }
+      w = this.width;
+      h = this.height;
+      if (w * factor > 1 && h * factor > 1) {
+        this.width *= factor;
+        this.height *= factor;
+        this.canvas.style.width = (this.width * 100).toFixed(2) + '%';
+        this.canvas.style.height = (this.height * 100).toFixed(2) + '%';
+        this.data.scale *= factor;
+      } else {
+        this._fit();
+        factor = this.width / w;
+      }
+      left = (this.left + 0.5) * factor - 0.5;
+      top = (this.top + 0.5) * factor - 0.5;
+      return this._offset(left, top);
+    };
+
+    Guillotine.prototype._fit = function() {
+      var prevWidth, relativeRatio;
+      prevWidth = this.width;
+      relativeRatio = this.height / this.width;
+      if (relativeRatio > 1) {
+        this.width = 1;
+        this.height = relativeRatio;
+      } else {
+        this.width = 1 / relativeRatio;
+        this.height = 1;
+      }
+      this.canvas.style.width = (this.width * 100).toFixed(2) + '%';
+      this.canvas.style.height = (this.height * 100).toFixed(2) + '%';
+      return this.data.scale *= this.width / prevWidth;
+    };
+
+    Guillotine.prototype._center = function() {
+      return this._offset((this.width - 1) / 2, (this.height - 1) / 2);
+    };
+
+    Guillotine.prototype._rotate = function(angle) {
+      var canvasRatio, glltRatio, h, w, _ref, _ref1, _ref2;
+      if (!canTransform()) {
+        return;
+      }
+      if (!(angle !== 0 && angle % 90 === 0)) {
+        return;
+      }
+      this.angle = (this.angle + angle) % 360;
+      if (this.angle < 0) {
+        this.angle = 360 + this.angle;
+      }
+      if (angle % 180 !== 0) {
+        glltRatio = this.op.height / this.op.width;
+        _ref = [this.height * glltRatio, this.width / glltRatio], this.width = _ref[0], this.height = _ref[1];
+        if (this.width >= 1 && this.height >= 1) {
+          this.canvas.style.width = this.width * 100 + '%';
+          this.canvas.style.height = this.height * 100 + '%';
+        } else {
+          this._fit();
+        }
+      }
+      _ref1 = [1, 1], w = _ref1[0], h = _ref1[1];
+      if (this.angle % 180 !== 0) {
+        canvasRatio = this.height / this.width * glltRatio;
+        _ref2 = [canvasRatio, 1 / canvasRatio], w = _ref2[0], h = _ref2[1];
+      }
+      this.el.style.width = w * 100 + '%';
+      this.el.style.height = h * 100 + '%';
+      this.el.style.left = (1 - w) / 2 * 100 + '%';
+      this.el.style.top = (1 - h) / 2 * 100 + '%';
+      this.$el.css({
+        transform: "rotate(" + this.angle + "deg)"
+      });
+      this._center();
+      return this.data.angle = this.angle;
+    };
+
+    Guillotine.prototype.rotateLeft = function() {
+      return this.enabled && (this._rotate(-90), this._trigger('rotateLeft'));
+    };
+
+    Guillotine.prototype.rotateRight = function() {
+      return this.enabled && (this._rotate(90), this._trigger('rotateRight'));
+    };
+
+    Guillotine.prototype.center = function() {
+      return this.enabled && (this._center(), this._trigger('center'));
+    };
+
+    Guillotine.prototype.fit = function() {
+      return this.enabled && (this._fit(), this._center(), this._trigger('fit'));
+    };
+
+    Guillotine.prototype.zoomIn = function() {
+      return this.enabled && (this._zoom(this.zoomInFactor), this._trigger('zoomIn'));
+    };
+
+    Guillotine.prototype.zoomOut = function() {
+      return this.enabled && (this._zoom(this.zoomOutFactor), this._trigger('zoomOut'));
+    };
+
+    Guillotine.prototype.getData = function() {
+      return this.data;
+    };
+
+    Guillotine.prototype.enable = function() {
+      return this.enabled = true;
+    };
+
+    Guillotine.prototype.disable = function() {
+      return this.enabled = false;
+    };
+
+    Guillotine.prototype.remove = function() {
+      this._unbind();
+      this._unwrap();
+      this.disable();
+      this.$el.off(events.start, this._start);
+      return this.$el.removeData(pluginName + 'Instance');
+    };
+
+    return Guillotine;
+
+  })();
+
+  whitelist = ['rotateLeft', 'rotateRight', 'center', 'fit', 'zoomIn', 'zoomOut', 'instance', 'getData', 'enable', 'disable', 'remove'];
+
+  $.fn[pluginName] = function(options) {
+    if (typeof options !== 'string') {
+      return this.each(function() {
+        var guillotine;
+        if (!$.data(this, pluginName + 'Instance')) {
+          guillotine = new Guillotine(this, options);
+          return $.data(this, pluginName + 'Instance', guillotine);
+        }
+      });
+    } else if (__indexOf.call(whitelist, options) >= 0) {
+      if (options === 'instance') {
+        return $.data(this[0], pluginName + 'Instance');
+      }
+      if (options === 'getData') {
+        return $.data(this[0], pluginName + 'Instance')[options]();
+      }
+      return this.each(function() {
+        var guillotine;
+        guillotine = $.data(this, pluginName + 'Instance');
+        if (guillotine) {
+          return guillotine[options]();
+        }
+      });
+    }
+  };
+
+}).call(this);
+
+
+
+
+
+
+
+
+