v0.7.9

fengyuanchen · Feb 19, 2015 · 87e22e5 · 87e22e5
1 parent 2b29212
commit 87e22e5
Show file tree

Hide file tree

Showing 12 changed files with 105 additions and 47 deletions.
diff --git a/README.md b/README.md
@@ -24,7 +24,7 @@ A simple jQuery image cropping plugin.
 dist/
 ├── cropper.css     ( 5 KB)
 ├── cropper.min.css ( 4 KB)
-├── cropper.js      (43 KB)
+├── cropper.js      (44 KB)
 └── cropper.min.js  (18 KB)
 ```
 
@@ -73,7 +73,9 @@ $(".container > img").cropper({
 ```
 
 **Notes:**
-- The size of the cropper inherits from the size of the image's parent element (wrapper), so be sure to wrap the image with a visible block element (minWidth: 300px, minHeight: 150px).
+
+- The size of the cropper inherits from the size of the image's parent element (wrapper), so be sure to wrap the image with a visible block element.
+
 - The values of the result data was computed with the original size of the image, so you can use them to crop the image directly.
 
 
@@ -500,8 +502,8 @@ If you have to use other plugin with the same namespace, just call the `$.fn.cro
 <script src="other-plugin.js"></script>
 <script src="cropper.js"></script>
 <script>
-$.fn.cropper.noConflict();
-// Code that uses other plugin's "$().cropper" can follow here.
+  $.fn.cropper.noConflict();
+  // Code that uses other plugin's "$().cropper" can follow here.
 </script>
 ```
 
@@ -517,11 +519,11 @@ $.fn.cropper.noConflict();
 As a jQuery plugin, you can reference to the [jQuery Browser Support](http://jquery.com/browser-support/).
 
 
-## [License](https://github.com/fengyuanchen/cropper/blob/master/LICENSE.md)
+## [License](LICENSE.md)
 
 Released under the [MIT](http://opensource.org/licenses/mit-license.html) license.
 
 
 ## Related projects
 
-- ngCropper: https://github.com/koorgoo/ngCropper
+- [ngCropper](https://github.com/koorgoo/ngCropper) - AngularJS wrapper for Cropper.
diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "cropper",
   "description": "A simple jQuery image cropping plugin.",
-  "version": "0.7.8",
+  "version": "0.7.9",
   "main": [
     "dist/cropper.js",
     "dist/cropper.css"

diff --git a/dist/cropper.css b/dist/cropper.css
@@ -1,5 +1,5 @@
 /*!
- * Cropper v0.7.8
+ * Cropper v0.7.9
  * https://github.com/fengyuanchen/cropper
  *
  * Copyright 2014-2015 Fengyuan Chen

diff --git a/dist/cropper.js b/dist/cropper.js
@@ -1,5 +1,5 @@
 /*!
- * Cropper v0.7.8
+ * Cropper v0.7.9
  * https://github.com/fengyuanchen/cropper
  *
  * Copyright 2014-2015 Fengyuan Chen
@@ -205,7 +205,7 @@
     isCrossOriginURL: function (url) {
       var parts = url.match(/^(https?:)\/\/([^\:\/\?#]+):?(\d*)/i);
 
-      if ((parts && (parts[1] !== location.protocol || parts[2] !== location.hostname || parts[3] !== location.port))) {
+      if (parts && (parts[1] !== location.protocol || parts[2] !== location.hostname || parts[3] !== location.port)) {
         return TRUE;
       }
 
@@ -333,9 +333,18 @@
 
       this.$preview.each(function () {
         var $this = $(this),
-            ratio = $this.width() / dragger.width;
+            data = $this.data(),
+            ratio = data.width / dragger.width,
+            newWidth = data.width,
+            newHeight = dragger.height * ratio;
+
+        if (newHeight > data.height) {
+          ratio = data.height / dragger.height,
+          newWidth = dragger.width * ratio;
+          newHeight = data.height;
+        }
 
-        $this.find("img").css({
+        $this.width(newWidth).height(newHeight).find("img").css({
           width: width * ratio,
           height: height * ratio,
           marginLeft: -left * ratio,
@@ -383,21 +392,37 @@
     },
 
     initPreview: function () {
-      var img = '<img src="' + this.url + '">';
+      var url = this.url;
 
       this.$preview = $(this.defaults.preview);
-      this.$viewer.html(img);
-      this.$preview.html(img).find("img").css("cssText", "min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;");
+      this.$viewer.html('<img src="' + url + '">');
+
+      this.$preview.each(function () {
+        var $this = $(this);
+
+        $this.data({
+          width: $this.width(),
+          height: $this.height()
+        }).html('<img src="' + url + '" style="display:block;width:100%;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;">');
+      });
     },
 
     initContainer: function () {
-      var $container = this.$container,
+      var $this = this.$element,
+          $container = this.$container,
+          $cropper = this.$cropper,
           defaults = this.defaults;
 
+      $cropper.addClass(CLASS_HIDDEN);
+      $this.removeClass(CLASS_HIDDEN);
+
       this.container = {
         width: max($container.width(), defaults.minContainerWidth),
         height: max($container.height(), defaults.minContainerHeight)
       };
+
+      $this.addClass(CLASS_HIDDEN);
+      $cropper.removeClass(CLASS_HIDDEN);
     },
 
     initCropper: function () {
@@ -591,6 +616,11 @@
       // Re-render the dragger
       this.dragger = dragger;
 
+      // #186
+      if (this.defaults.movable) {
+        this.$dragger.find(".cropper-face").data(STRING_DIRECTIVE, (dragger.width === cropper.width && dragger.height === cropper.height) ? "move" : "all");
+      }
+
       if (!this.disabled) {
         this.defaults.done(this.getData());
       }
@@ -902,21 +932,19 @@
     getRotatedDataURL: function (degree) {
       var canvas = $("<canvas>")[0],
           context = canvas.getContext("2d"),
-          arc = degree * Math.PI / 180,
-          deg = abs(degree) % 180,
-          acuteAngle = deg > 90 ? (180 - deg) : deg,
-          acuteAngleArc = acuteAngle * Math.PI / 180,
           originalImage = this.originalImage,
           naturalWidth = originalImage.naturalWidth,
           naturalHeight = originalImage.naturalHeight,
-          width = abs(naturalWidth * cos(acuteAngleArc) + naturalHeight * sin(acuteAngleArc)),
-          height = abs(naturalWidth * sin(acuteAngleArc) + naturalHeight * cos(acuteAngleArc));
+          deg = abs(degree) % 180,
+          arc = (deg > 90 ? (180 - deg) : deg) * Math.PI / 180,
+          width = naturalWidth * cos(arc) + naturalHeight * sin(arc),
+          height = naturalWidth * sin(arc) + naturalHeight * cos(arc);
 
       canvas.width = width;
       canvas.height = height;
       context.save();
       context.translate(width / 2, height / 2);
-      context.rotate(arc);
+      context.rotate(degree * Math.PI / 180);
       context.drawImage(this.$original[0], -naturalWidth / 2, -naturalHeight / 2, naturalWidth, naturalHeight);
       context.restore();
 

diff --git a/dist/cropper.min.css b/dist/cropper.min.css
diff --git a/dist/cropper.min.js b/dist/cropper.min.js
diff --git a/docs/dist/cropper.css b/docs/dist/cropper.css
@@ -1,5 +1,5 @@
 /*!
- * Cropper v0.7.8
+ * Cropper v0.7.9
  * https://github.com/fengyuanchen/cropper
  *
  * Copyright 2014-2015 Fengyuan Chen

diff --git a/docs/dist/cropper.js b/docs/dist/cropper.js
@@ -1,5 +1,5 @@
 /*!
- * Cropper v0.7.8
+ * Cropper v0.7.9
  * https://github.com/fengyuanchen/cropper
  *
  * Copyright 2014-2015 Fengyuan Chen
@@ -205,7 +205,7 @@
     isCrossOriginURL: function (url) {
       var parts = url.match(/^(https?:)\/\/([^\:\/\?#]+):?(\d*)/i);
 
-      if ((parts && (parts[1] !== location.protocol || parts[2] !== location.hostname || parts[3] !== location.port))) {
+      if (parts && (parts[1] !== location.protocol || parts[2] !== location.hostname || parts[3] !== location.port)) {
         return TRUE;
       }
 
@@ -333,9 +333,18 @@
 
       this.$preview.each(function () {
         var $this = $(this),
-            ratio = $this.width() / dragger.width;
+            data = $this.data(),
+            ratio = data.width / dragger.width,
+            newWidth = data.width,
+            newHeight = dragger.height * ratio;
+
+        if (newHeight > data.height) {
+          ratio = data.height / dragger.height,
+          newWidth = dragger.width * ratio;
+          newHeight = data.height;
+        }
 
-        $this.find("img").css({
+        $this.width(newWidth).height(newHeight).find("img").css({
           width: width * ratio,
           height: height * ratio,
           marginLeft: -left * ratio,
@@ -383,21 +392,37 @@
     },
 
     initPreview: function () {
-      var img = '<img src="' + this.url + '">';
+      var url = this.url;
 
       this.$preview = $(this.defaults.preview);
-      this.$viewer.html(img);
-      this.$preview.html(img).find("img").css("cssText", "min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;");
+      this.$viewer.html('<img src="' + url + '">');
+
+      this.$preview.each(function () {
+        var $this = $(this);
+
+        $this.data({
+          width: $this.width(),
+          height: $this.height()
+        }).html('<img src="' + url + '" style="display:block;width:100%;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;">');
+      });
     },
 
     initContainer: function () {
-      var $container = this.$container,
+      var $this = this.$element,
+          $container = this.$container,
+          $cropper = this.$cropper,
           defaults = this.defaults;
 
+      $cropper.addClass(CLASS_HIDDEN);
+      $this.removeClass(CLASS_HIDDEN);
+
       this.container = {
         width: max($container.width(), defaults.minContainerWidth),
         height: max($container.height(), defaults.minContainerHeight)
       };
+
+      $this.addClass(CLASS_HIDDEN);
+      $cropper.removeClass(CLASS_HIDDEN);
     },
 
     initCropper: function () {
@@ -591,6 +616,11 @@
       // Re-render the dragger
       this.dragger = dragger;
 
+      // #186
+      if (this.defaults.movable) {
+        this.$dragger.find(".cropper-face").data(STRING_DIRECTIVE, (dragger.width === cropper.width && dragger.height === cropper.height) ? "move" : "all");
+      }
+
       if (!this.disabled) {
         this.defaults.done(this.getData());
       }
@@ -902,21 +932,19 @@
     getRotatedDataURL: function (degree) {
       var canvas = $("<canvas>")[0],
           context = canvas.getContext("2d"),
-          arc = degree * Math.PI / 180,
-          deg = abs(degree) % 180,
-          acuteAngle = deg > 90 ? (180 - deg) : deg,
-          acuteAngleArc = acuteAngle * Math.PI / 180,
           originalImage = this.originalImage,
           naturalWidth = originalImage.naturalWidth,
           naturalHeight = originalImage.naturalHeight,
-          width = abs(naturalWidth * cos(acuteAngleArc) + naturalHeight * sin(acuteAngleArc)),
-          height = abs(naturalWidth * sin(acuteAngleArc) + naturalHeight * cos(acuteAngleArc));
+          deg = abs(degree) % 180,
+          arc = (deg > 90 ? (180 - deg) : deg) * Math.PI / 180,
+          width = naturalWidth * cos(arc) + naturalHeight * sin(arc),
+          height = naturalWidth * sin(arc) + naturalHeight * cos(arc);
 
       canvas.width = width;
       canvas.height = height;
       context.save();
       context.translate(width / 2, height / 2);
-      context.rotate(arc);
+      context.rotate(degree * Math.PI / 180);
       context.drawImage(this.$original[0], -naturalWidth / 2, -naturalHeight / 2, naturalWidth, naturalHeight);
       context.restore();
 

diff --git a/docs/dist/cropper.min.css b/docs/dist/cropper.min.css
diff --git a/docs/dist/cropper.min.js b/docs/dist/cropper.min.js
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "cropper",
   "description": "A simple jQuery image cropping plugin.",
-  "version": "0.7.8",
+  "version": "0.7.9",
   "main": "dist/cropper.js",
   "keywords": [
     "image",

diff --git a/src/cropper.js b/src/cropper.js
@@ -336,7 +336,7 @@
           newHeight = data.height;
         }
 
-        $this.width(newWidth).height(newHeight).find('img').css({
+        $this.width(newWidth).height(newHeight).find("img").css({
           width: width * ratio,
           height: height * ratio,
           marginLeft: -left * ratio,