diff --git a/src/tapatar.js b/src/tapatar.js
index 0b0def8..8c9b63b 100644
--- a/src/tapatar.js
+++ b/src/tapatar.js
@@ -17,8 +17,15 @@
             templates: {
                 widget: '<div class="tptr-widget"><span class="tptr-widget-pick">pick</span></div>',
                 overlay: '<div class="tptr-container" style="display: none"><div class="tptr-overlay"></div></div>',
-                picker: '<div class="tptr-picker"><div class="tptr-close"></div><div class="tptr-image-holder tptr-box-part"><div class="tptr-big-image"> </div></div><div class="tptr-sources-holder tptr-box-part"><div class="tptr-sources"></div><button class="tptr-save">Save</button></div></div>',
+                picker: '<div class="tptr-picker"><div class="tptr-close"></div><div class="tptr-image-holder tptr-box-part"><img class="tptr-big-image"></div><div class="tptr-sources-holder tptr-box-part"><div class="tptr-sources"></div><button class="tptr-save">Save</button></div></div>',
                 source: '<div class="tptr-source"><div class="tptr-source-part tptr-source-icon"><img /></div><div class="tptr-source-part tptr-source-content"></div><div class="tptr-source-part tptr-source-image-preview"></div><button class="tptr-source-part tptr-source-pick">Pick</button></div>'
+            },
+            cropper: {
+                enabled: false,
+                options: {
+                    autoCropArea: 1.0
+                    // https://github.com/fengyuanchen/cropper
+                }
             }
         };
 
@@ -54,7 +61,7 @@
             this.$tptrEl = $(this.element).parent();
             var $innerEl = $('<div class="tptr-inner"></div>');
             this.$tptrEl.append('<div class="tptr-inner"></div>');
-            var $innerEl = this.$tptrEl.find('.tptr-inner');
+            $innerEl = this.$tptrEl.find('.tptr-inner');
 
             var self = this;
 
@@ -82,6 +89,7 @@
         pickSource: function(source) {
             this.selectedSource = source.id;
             this._setPickedImage(source);
+            if (this.options.cropper.enabled) this._addCropper(source);
         },
         imageDataSet: function(source, pick) {
             this._updateSourceUi(source);
@@ -99,7 +107,8 @@
 
             // Register click handler for the save button
             $(document).on('click', '.tptr-save', function() {
-                self._save();
+                self.
+                ();
             });
 
             // Register click handler for the save button
@@ -118,16 +127,10 @@
         },
         _setPickedImage: function(source) {
             if (!source.image_data) return;
-            this.$containerEl.find('.tptr-image-holder .tptr-big-image').css('background-image', 'url(' + source.image_data + ')');
+            this.$containerEl.find('.tptr-big-image').attr('src', source.image_data);
         },
         _popPicker: function() {
-            var sources = '';
-
             var $picker = $(this.options.templates.picker);
-            var imageData = (this.selectedSource)
-                                ? this.sources[this.selectedSource].image_data
-                                : this._getImageFromPathOrFunction(this.options.default_image, this.options);
-            $picker.find('.tptr-big-image').css('background-image', 'url(' + imageData + ')');
 
             // Sort sources and append
             var $sourcesHolder = $picker.find('.tptr-sources');
@@ -140,21 +143,35 @@
             sorted.reverse();
 
             for (var i = sorted.length - 1; i >= 0; i--) {
-                var source = this.sources[sorted[i][0]];
+                source = this.sources[sorted[i][0]];
                 if (source && this.options.sources[source.id].enabled) {
                     $sourcesHolder.append($(this._buildSource(source)));
                 }
-            };
+            }
 
             var $overlay = $(this.options.templates.overlay);
             $overlay.find('.tptr-overlay').html($picker);
             $('body').append($overlay);
 
-            var self = this;
-
             this.pickerActive = true;
             $overlay.fadeIn();
             this.$containerEl = $overlay;
+
+            if (this.selectedSource) { // recover chosen image
+                var $widget = this.$tptrEl.find('.tptr-widget'),
+                    data = $widget.data('original'),
+                    cropData = $widget.data('crop-data');
+
+                if (data)
+                    this.sources[this.selectedSource].image_data = data;
+                if (cropData)
+                    this.options.cropper.options.data = cropData;
+
+                this.pickSource(this.sources[this.selectedSource]);
+            } else { // or use default
+                $picker.find('.tptr-big-image').attr('src', this._getImageFromPathOrFunction(this.options.default_image, this.options));
+            }
+
             this._updateAllSourcesUi();
         },
         _closePicker: function() {
@@ -180,13 +197,27 @@
 
             return $el;
         },
+        _addCropper: function(source) {
+            var $img = this.$containerEl.find('.tptr-big-image');
+            this.$tptrEl.find('.tptr-widget').data('original', $img.prop('src'));
+
+            $img
+                .cropper('destroy')
+                .cropper(this.options.cropper.options)
+                .on('crop.cropper', this._cropEvent.bind(this, source, $img));
+        },
+        _cropEvent: function(source, $img) {
+            this.$tptrEl.find('.tptr-widget').data('crop-data', $img.cropper('getData'));
+            source.setImageData($img.cropper('getCroppedCanvas').toDataURL());
+            this._setPickedImage(source);
+        },
         _getSourceEl: function (source) {
             return this.$containerEl.find('[data-source-id=' + source.id +']');
         },
         _updateAllSourcesUi: function() {
             for (var source in this.sources) {
                 this._updateSourceUi(this.sources[source])
-            };
+            }
         },
         _updateSourceUi: function(source) {
             if (!this.pickerActive) return;
@@ -199,6 +230,8 @@
             this._getSourceEl(source).find('.tptr-source-image-preview').html($('<div></div>').css('background-image', 'url(' + source.image_data + ')'));
         },
         _save: function() {
+            if (!this.sources[this.selectedSource]) return;
+            
             var imgData = this.sources[this.selectedSource].image_data;
             $(this.element).val(imgData);
             this.$tptrEl.find('.tptr-widget').css('background-image', 'url(' + imgData + ')');
@@ -219,7 +252,7 @@
         } else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
             // Call a public plugin method (not starting with an underscore) for each
             // selected element.
-            if (Array.prototype.slice.call(args, 1).length == 0 && $.inArray(options, $.fn[pluginName].getters) != -1) {
+            if (Array.prototype.slice.call(args, 1).length === 0 && $.inArray(options, $.fn[pluginName].getters) != -1) {
                 // If the user does not pass any arguments and the method allows to
                 // work as a getter then break the chainability so we can return a value
                 // instead the element reference.
diff --git a/src/tapatar.less b/src/tapatar.less
index a6d9379..4635973 100644
--- a/src/tapatar.less
+++ b/src/tapatar.less
@@ -18,6 +18,16 @@
     display: flex;
 }
 
+.tptr-flex-center() {
+    -webkit-align-items: center;
+        -ms-flex-align: center;
+             align-items: center;
+
+    -webkit-justify-content: center;
+        -ms-flex-pack: center;
+             justify-content: center;
+}
+
 .tptr-widget {
     font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
     height: 70px;
@@ -25,7 +35,9 @@
     border-radius: 35px;
     -webkit-border-radius: 35px;
     -moz-border-radius: 35px;
-    background-size: cover;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: 50%;
     display: block;
     overflow: hidden;
     position: relative;
@@ -66,6 +78,7 @@
 
     .tptr-overlay {
         .tptr-flex();
+        .tptr-flex-center();
         position: fixed;
         top: 0;
         left: 0;
@@ -74,14 +87,6 @@
         background-color: @tptr-color-overlay;
         z-index: 101;
 
-        -webkit-align-items: center;
-             -ms-flex-align: center;
-                align-items: center;
-
-        -webkit-justify-content: center;
-                  -ms-flex-pack: center;
-                justify-content: center;
-
         .tptr-picker {
             .tptr-flex();
             position: relative;
@@ -129,11 +134,9 @@
                 }
 
                 .tptr-big-image {
-                    width: 100%;
-                    height: 0;
-                    padding-top: 100%;
-                    background-size: cover;
                     display: block;
+                    margin: auto;
+                    width: 100%;
                 }
             }
 
@@ -164,7 +167,7 @@
                     margin-bottom: @source-padding;
                     .clearfix();
 
-                    .tptr-source-part, {
+                    .tptr-source-part {
                         float: left;
                         background-color: @tptr-color-gray-accent;
                         height: @source-height;
@@ -208,8 +211,9 @@
                             width: @source-height;
                             height: 0;
                             padding-top: 100%;
-                            background-size: cover;
-                            display: block;
+                            background-size: contain;
+                            background-repeat: no-repeat;
+                            background-position: 50%;
                         }
                     }
                 }