acornejo · ghost · Dec 1, 2013 · Dec 1, 2013 · Dec 1, 2013 · Dec 1, 2013
diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "cropbox",
   "main": "jquery.cropbox.js",
-  "version": "0.1.5",
+  "version": "0.1.8",
   "homepage": "https://github.com/acornejo/jquery-cropbox",
   "authors": [
     "Alex Cornejo <[email protected]>"
@@ -23,4 +23,4 @@
     "node_modules",
     "bower_components"
   ]
-}
+}
diff --git a/cropbox.jquery.json b/cropbox.jquery.json
@@ -1,37 +1,37 @@
-{
-  "name": "cropbox",
-  "title": "jquery-cropbox plugin",
-  "keywords": [
-      "jquery",
-      "crop",
-      "cropping",
-      "drag",
-      "zoom",
-      "pan",
-      "touch"
-  ],
-  "version": "0.1.4",
-  "author": {
-    "name": "Alex Cornejo",
-    "url": "https://github.com/acornejo"
-  },
-  "maintainers": [
-    {
-      "name": "Alex Cornejo",
-      "url": "https://github.com/acornejo"
-    }
-  ],
-  "licenses": [
-    {
-      "type": "MIT",
-      "url": "http://opensource.org/licenses/MIT"
-    }
-  ],
-  "bugs": "https://github.com/acornejo/jquery-cropbox/issues",
-  "homepage": "https://github.com/acornejo/jquery-cropbox",
-  "docs": "https://github.com/acornejo/jquery-cropbox",
-  "dependencies": {
-      "jquery": ">=1.7"
-  },
-  "description": "jQuery plugin for in-place image cropping (zoom & pan, as opposed to select and drag).\n \n This plugin depends only on jQuery. If either `Hammer.js` or `jquery.hammer.js` is\n loaded, the cropbox plugin will support gestures for panning and zooming\n the cropbox. Similary, if the `jquery.mousewheel.js` plugin is loaded, then the\n cropbox plugin will support zoom in & out using the mousewheel. All\n dependencies on third party libraries (other than jQuery) are strictly\n optional. Support for CommonJS and AMD loading is built in.\n \n In browsers that support the HTML5 FIle API and Canvas API, the cropbox\n plugin provides mehtods to crop the image on the client and obtain the\n resulting cropped image as a Data URL or a binary blob to upload it to\n the server.\n \n Check out the plugin in action here http://acornejo.github.io/jquery-cropbox/"
-}
+{
+  "name": "cropbox",
+  "title": "jquery-cropbox plugin",
+  "keywords": [
+    "jquery",
+    "crop",
+    "cropping",
+    "drag",
+    "zoom",
+    "pan",
+    "touch"
+  ],
+  "version": "0.1.8",
+  "author": {
+    "name": "Alex Cornejo",
+    "url": "https://github.com/acornejo"
+  },
+  "maintainers": [
+    {
+      "name": "Alex Cornejo",
+      "url": "https://github.com/acornejo"
+    }
+  ],
+  "licenses": [
+    {
+      "type": "MIT",
+      "url": "http://opensource.org/licenses/MIT"
+    }
+  ],
+  "bugs": "https://github.com/acornejo/jquery-cropbox/issues",
+  "homepage": "https://github.com/acornejo/jquery-cropbox",
+  "docs": "https://github.com/acornejo/jquery-cropbox",
+  "dependencies": {
+    "jquery": ">=1.7"
+  },
+  "description": "jQuery plugin for in-place image cropping (zoom & pan, as opposed to select and drag).\n \n This plugin depends only on jQuery. If either `Hammer.js` or `jquery.hammer.js` is\n loaded, the cropbox plugin will support gestures for panning and zooming\n the cropbox. Similary, if the `jquery.mousewheel.js` plugin is loaded, then the\n cropbox plugin will support zoom in & out using the mousewheel. All\n dependencies on third party libraries (other than jQuery) are strictly\n optional. Support for CommonJS and AMD loading is built in.\n \n In browsers that support the HTML5 FIle API and Canvas API, the cropbox\n plugin provides mehtods to crop the image on the client and obtain the\n resulting cropped image as a Data URL or a binary blob to upload it to\n the server.\n \n Check out the plugin in action here http://acornejo.github.io/jquery-cropbox/"
+}
diff --git a/img.jpg b/img.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>jQuery-cropbox</title>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+  <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
+  <link type="text/css" media="screen" rel="stylesheet" href="jquery.cropbox.css">
+  <style type="text/css">
+    body {
+      font-family : sans-serif;
+      font-size   : 13px;
+    }
+    .results {
+      font-family : monospace;
+      font-size   : 20px;
+    }
+  </style>
+  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
+  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/hammer.js"></script>
+  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.6/jquery.mousewheel.js"></script>
+  <script type="text/javascript" src="jquery.cropbox.js"></script>
+  <script type="text/javascript" defer>
+    $( function () {
+      $( '.cropimage' ).each( function () {
+        var image = $(this),
+            cropwidth = image.attr('cropwidth'),
+            cropheight = image.attr('cropheight'),
+            results = image.next('.results' ),
+            x       = $('.cropX', results),
+            y       = $('.cropY', results),
+            w       = $('.cropW', results),
+            h       = $('.cropH', results),
+            download = results.next('.download').find('a');
+
+          image.cropbox( {width: cropwidth, height: cropheight, showControls: 'auto' } )
+            .on('cropbox', function( event, results, img ) {
+              x.text( results.cropX );
+              y.text( results.cropY );
+              w.text( results.cropW );
+              h.text( results.cropH );
+              download.attr('href', img.getDataURL());
+            });
+      } );
+
+      $('#select').on('change', function () {
+          var size = parseInt(this.value);
+          $('.cropimage').each(function () {
+            $(this).cropbox({width: size, height: size})
+          });
+      });
+
+    } );
+  </script>
+</head>
+<body>
+
+  <img class="cropimage" alt="" src="img.jpg" cropwidth="200" cropheight="200"/>
+  <div class="results">
+    <b>X</b>: <span class="cropX"></span>
+    <b>Y</b>: <span class="cropY"></span>
+    <b>W</b>: <span class="cropW"></span>
+    <b>H</b>: <span class="cropH"></span>
+  </div>
+  <div class="download">
+    <a href="#" download="crop.png">Download</a>
+  </div>
+
+  <br/>
+
+  <img class="cropimage" alt="" src="img.jpg" cropwidth="300" cropheight="200"/>
+  <div class="results">
+    <b>X</b>: <span class="cropX"></span>
+    <b>Y</b>: <span class="cropY"></span>
+    <b>W</b>: <span class="cropW"></span>
+    <b>H</b>: <span class="cropH"></span>
+  </div>
+
+  <div class="download">
+    <a href="#" download="crop.png">Download</a>
+  </div>
+
+  <br/>
+
+  <h4>Change size of every cropbox</h4>
+
+  <select id="select">
+    <option value="200" selected>200</option>
+    <option value="300">300</option>
+  </select>
+</body>
diff --git a/jquery.cropbox.js b/jquery.cropbox.js
@@ -30,6 +30,8 @@
       this.height = null;
       this.img_width = null;
       this.img_height = null;
+      this.img_left = 0;
+      this.img_top = 0;
       this.minPercent = null;
       this.options = options;
       this.$image = $image;
@@ -57,14 +59,13 @@
           else
             hammerit = Hammer(this.$image.get(0));
 
-          hammerit.on('mousedown', function(e) {
-            e.preventDefault(); // this prevents firefox's default image dragging
-            e.stopPropagation();
+          hammerit.on('touch', function(e) {
+            e.gesture.preventDefault();
           }).on("dragleft dragright dragup dragdown", function(e) {
             if (!dragData)
               dragData = {
-                startX: parseInt(self.$image.css('left'), 10),
-                startY: parseInt(self.$image.css('top'), 10)
+                startX: self.img_left,
+                startY: self.img_top,
               };
             dragData.dx = e.gesture.deltaX;
             dragData.dy = e.gesture.deltaY;
@@ -88,8 +89,8 @@
         } else {
           this.$image.on('mousedown.' + pluginName, function(e1) {
             var dragData = {
-              startX: parseInt(self.$image.css('left'), 10),
-              startY: parseInt(self.$image.css('top'), 10)
+              startX: self.img_left,
+              startY: self.img_top,
             };
             e1.preventDefault();
             $(document).on('mousemove.' + pluginName, function (e2) {
@@ -98,7 +99,8 @@
               self.drag.call(self, dragData, true);
             }).on('mouseup.' + pluginName, function() {
               self.update.call(self);
-              $(document).off('.' + pluginName);
+              $(document).off('mouseup.' + pluginName);
+              $(document).off('mousemove.' + pluginName);
             });
           });
         }
@@ -115,7 +117,9 @@
 
       updateOptions: function () {
         var self = this;
-        self.$image.css({width: '', left: 0, top: 0});
+        self.img_top = 0;
+        self.img_left = 0;
+        self.$image.css({width: '', left: self.img_left, top: self.img_top});
         self.$frame.width(self.options.width).height(self.options.height);
         self.$frame.off('.' + pluginName);
         self.$frame.removeClass('hover');
@@ -132,12 +136,15 @@
         img.onload = function () {
           self.width = img.width;
           self.height = img.height;
+          img.src = '';
+          img.onload = null;
           self.percent = undefined;
+          self.fit.call(self);
+          if (self.options.result)
+            self.setCrop.call(self, self.options.result);
+          else
+            self.zoom.call(self, self.minPercent);
           self.$image.fadeIn('fast');
-          self.fit();
-          self.update();
-          img.src = null;
-          img.onload = null;
         };
       },
 
@@ -165,31 +172,35 @@
         var widthRatio = this.options.width / this.width,
           heightRatio = this.options.height / this.height;
         this.minPercent = (widthRatio >= heightRatio) ? widthRatio : heightRatio;
-        this.zoom(this.minPercent);
+      },
+
+      setCrop: function (result) {
+        this.percent = Math.max(this.options.width/result.cropW, this.options.height/result.cropH);
+        this.img_width = Math.ceil(this.width*this.percent);
+        this.img_height = Math.ceil(this.height*this.percent);
+        this.img_left = -Math.floor(result.cropX*this.percent);
+        this.img_top = -Math.floor(result.cropY*this.percent);
+        this.$image.css({ width: this.img_width, left: this.img_left, top: this.img_top });
+        this.update();
       },
 
       zoom: function(percent) {
-        var old_left = parseInt(this.$image.css('left'), 10),
-          old_top = parseInt(this.$image.css('top'), 10),
-          old_percent = this.percent;
+        var old_percent = this.percent;
 
-        this.percent = Math.max(this.minPercent, Math.min(1, percent));
+        this.percent = Math.max(this.minPercent, Math.min(this.options.maxZoom, percent));
         this.img_width = Math.ceil(this.width * this.percent);
         this.img_height = Math.ceil(this.height * this.percent);
-        this.$image.width(this.img_width);
 
         if (old_percent) {
           var zoomFactor = this.percent / old_percent;
-          this.$image.css({
-            left: fill((1 - zoomFactor) * this.options.width / 2 + zoomFactor * old_left, this.img_width, this.options.width),
-            top: fill((1 - zoomFactor) * this.options.height / 2 + zoomFactor * old_top, this.img_height, this.options.height)
-          });
+          this.img_left = fill((1 - zoomFactor) * this.options.width / 2 + zoomFactor * this.img_left, this.img_width, this.options.width);
+          this.img_top = fill((1 - zoomFactor) * this.options.height / 2 + zoomFactor * this.img_top, this.img_height, this.options.height);
         } else {
-          this.$image.css({
-            left: fill((this.options.width - this.img_width) / 2, this.img_width, this.options.width),
-            right: fill((this.options.height - this.img_height) / 2, this.img_height, this.options.height)
-          });
+          this.img_left = fill((this.options.width - this.img_width) / 2, this.img_width,  this.options.width);
+          this.img_top = fill((this.options.height - this.img_height) / 2, this.img_height, this.options.height);
         }
+
+        this.$image.css({ width: this.img_width, left: this.img_left, top: this.img_top });
         this.update();
       },
       zoomIn: function() {
@@ -199,17 +210,16 @@
         this.zoom(this.percent - (1 - this.minPercent) / (this.options.zoom - 1 || 1));
       },
       drag: function(data, skipupdate) {
-        this.$image.css({
-          left: fill(data.startX + data.dx, this.img_width, this.options.width),
-          top: fill(data.startY + data.dy, this.img_height, this.options.height)
-        });
+        this.img_left = fill(data.startX + data.dx, this.img_width, this.options.width);
+        this.img_top = fill(data.startY + data.dy, this.img_height, this.options.height);
+        this.$image.css({ left: this.img_left, top: this.img_top });
         if (skipupdate)
           this.update();
       },
       update: function() {
         this.result = {
-          cropX: -Math.ceil(parseInt(this.$image.css('left'), 10) / this.percent),
-          cropY: -Math.ceil(parseInt(this.$image.css('top'), 10) / this.percent),
+          cropX: -Math.ceil(this.img_left / this.percent),
+          cropY: -Math.ceil(this.img_top / this.percent),
           cropW: Math.floor(this.options.width / this.percent),
           cropH: Math.floor(this.options.height / this.percent),
           stretch: this.minPercent > 1
@@ -246,6 +256,7 @@
       width: 200,
       height: 200,
       zoom: 10,
+      maxZoom: 1,
       controls: null,
       showControls: 'auto'
     };

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jquery-cropbox",
-  "version": "0.1.5",
+  "version": "0.1.8",
   "author": "Alex Cornejo",
   "main": "jquery.cropbox.js",
   "devDependencies": {
@@ -25,4 +25,4 @@
     "pretest": "./node_modules/.bin/jshint -e 'js,json' --exclude node_modules ."
   },
   "description": "jQuery plugin for in-place image cropping (zoom & pan, as opposed to select and drag).\n \n This plugin depends only on jQuery. If either `Hammer.js` or `jquery.hammer.js` is\n loaded, the cropbox plugin will support gestures for panning and zooming\n the cropbox. Similary, if the `jquery.mousewheel.js` plugin is loaded, then the\n cropbox plugin will support zoom in & out using the mousewheel. All\n dependencies on third party libraries (other than jQuery) are strictly\n optional. Support for CommonJS and AMD loading is built in.\n \n In browsers that support the HTML5 FIle API and Canvas API, the cropbox\n plugin provides mehtods to crop the image on the client and obtain the\n resulting cropped image as a Data URL or a binary blob to upload it to\n the server.\n \n Check out the plugin in action here http://acornejo.github.io/jquery-cropbox/"
-}
+}