Release v0.3.2

CHANGELOG.md

@@ -1,6 +1,11 @@
 # Changelog
 
 
+## 0.3.2 (Nov 20, 2015)
+
+- Fixed #10: improve new crop box creating
+
+
 ## 0.3.1 (Nov 11, 2015)
 
 - Fixed #7: reset the `crossOrigin` when call the `replace` method

README.md

@@ -28,7 +28,7 @@
 dist/
 ├── cropper.css     ( 5 KB)
 ├── cropper.min.css ( 4 KB)
-├── cropper.js      (80 KB)
+├── cropper.js      (78 KB)
 └── cropper.min.js  (28 KB)
 ```
 
@@ -104,7 +104,7 @@ See the [FAQ](FAQ.md) documentation.
 
 #### Known issues
 
-- About `getCroppedCanvas` method: The `canvas.drawImage` API in some Mac OS / iOS browsers will rotate an image with EXIF Orientation automatically, so the output cropped canvas may be incorrect. To fix this, you may upload the cropped data and crop the image in the server-side, see the example: [Crop Avatar](https://github.com/fengyuanchen/cropper/tree/master/examples/crop-avatar). Or you may handle the EXIF Orientation with canvas as [JavaScript Load Image](https://github.com/blueimp/JavaScript-Load-Image) or in server as PHP first before to use cropper.
+- About `getCroppedCanvas` method: The `canvas.drawImage` API in some Mac OS / iOS browsers will rotate an image with EXIF Orientation automatically, so the output cropped canvas may be incorrect. To fix this, you may upload the cropped data and crop the image in the server-side, see the example: [Crop Avatar](https://github.com/fengyuanchen/cropper/tree/master/examples/crop-avatar). Or you may translate the EXIF Orientation by canvas as [Loader](https://github.com/fengyuanchen/loader) first before to use cropper.
 
 - [Known iOS resource limits](https://developer.apple.com/library/mac/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html): As iOS devices limit memory, the browser may crash when you are cropping a large image (iPhone camera resolution). To avoid this, you may resize the image first (below 1024px) before start a cropper.
 

demo/index.html

@@ -5,7 +5,7 @@
   <meta http-equiv="x-ua-compatible" content="ie=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="A basic demo of Cropper.">
-  <meta name="keywords" content="HTML, CSS, JS, JavaScript, image cropping, image crop, image move, image zoom, image rotate, image scale, front-end, frontend, web development">
+  <meta name="keywords" content="HTML, CSS, JS, JavaScript, image crop, image move, image zoom, image rotate, image scale, front-end, frontend, web development">
   <meta name="author" content="Fengyuan Chen">
   <title>Cropper</title>
   <link rel="stylesheet" href="../assets/css/font-awesome.min.css">

dist/cropper.css

@@ -1,11 +1,11 @@
 /*!
- * Cropper v0.3.1
+ * Cropper v0.3.2
  * https://github.com/fengyuanchen/cropperjs
  *
  * Copyright (c) 2015 Fengyuan Chen
  * Released under the MIT license
  *
- * Date: 2015-11-11T11:11:11.111Z
+ * Date: 2015-11-18T02:52:53.353Z
  */
 .cropper-container {
   position: relative;
@@ -27,7 +27,7 @@
   width: 100%;
   min-width: 0 !important;
   max-width: none !important;
-  height: 100%;
+  height: 100%; 
   min-height: 0 !important;
   max-height: none !important;
 
@@ -52,20 +52,20 @@
 
 .cropper-drag-box {
   background-color: #fff;
-  filter: alpha(opacity=0);
+  filter: alpha(opacity=0); 
   opacity: 0;
 }
 
 .cropper-modal {
   background-color: #000;
-  filter: alpha(opacity=50);
+  filter: alpha(opacity=50); 
   opacity: .5;
 }
 
 .cropper-view-box {
   display: block;
   width: 100%;
-  height: 100%;
+  height: 100%; 
   overflow: hidden;
   outline: 1px solid #39f;
   outline-color: rgba(51, 153, 255, .75);
@@ -74,23 +74,23 @@
 .cropper-dashed {
   position: absolute;
   display: block;
-  filter: alpha(opacity=50);
+  filter: alpha(opacity=50); 
   border: 0 dashed #eee;
   opacity: .5;
 }
 .cropper-dashed.dashed-h {
   top: 33.33333%;
   left: 0;
   width: 100%;
-  height: 33.33333%;
+  height: 33.33333%; 
   border-top-width: 1px;
   border-bottom-width: 1px;
 }
 .cropper-dashed.dashed-v {
   top: 0;
   left: 33.33333%;
   width: 33.33333%;
-  height: 100%;
+  height: 100%; 
   border-right-width: 1px;
   border-left-width: 1px;
 }
@@ -102,13 +102,13 @@
   display: block;
   width: 0;
   height: 0;
-  filter: alpha(opacity=75);
+  filter: alpha(opacity=75); 
   opacity: .75;
 }
 .cropper-center:before, .cropper-center:after {
   position: absolute;
   display: block;
-  content: " ";
+  content: " "; 
   background-color: #eee;
 }
 .cropper-center:before {
@@ -131,7 +131,7 @@
   display: block;
   width: 100%;
   height: 100%;
-  filter: alpha(opacity=10);
+  filter: alpha(opacity=10); 
   opacity: .1;
 }
 
@@ -173,7 +173,7 @@
   width: 5px;
   height: 5px;
   background-color: #39f;
-  filter: alpha(opacity=75);
+  filter: alpha(opacity=75); 
   opacity: .75;
 }
 .cropper-point.point-e {
@@ -221,7 +221,7 @@
   width: 20px;
   height: 20px;
   cursor: se-resize;
-  filter: alpha(opacity=100);
+  filter: alpha(opacity=100); 
   opacity: 1;
 }
 .cropper-point.point-se:before {
@@ -233,7 +233,7 @@
   height: 200%;
   content: " ";
   background-color: #39f;
-  filter: alpha(opacity=0);
+  filter: alpha(opacity=0); 
   opacity: 0;
 }
 @media (min-width: 768px) {
@@ -252,7 +252,7 @@
   .cropper-point.point-se {
     width: 5px;
     height: 5px;
-    filter: alpha(opacity=75);
+    filter: alpha(opacity=75); 
     opacity: .75;
   }
 }
@@ -262,7 +262,7 @@
 }
 
 .cropper-invisible {
-  filter: alpha(opacity=0);
+  filter: alpha(opacity=0); 
   opacity: 0;
 }
 

dist/cropper.js

@@ -1,11 +1,11 @@
 /*!
- * Cropper v0.3.1
+ * Cropper v0.3.2
  * https://github.com/fengyuanchen/cropperjs
  *
  * Copyright (c) 2015 Fengyuan Chen
  * Released under the MIT license
  *
- * Date: 2015-11-11T11:11:11.111Z
+ * Date: 2015-11-18T02:52:57.879Z
  */
 
 (function (global, factory) {
@@ -90,7 +90,7 @@
 
   // Prototype
   var prototype = {
-    version: '0.3.1'
+    version: '0.3.2'
   };
 
   // Utilities
@@ -2036,36 +2036,35 @@
 
         // Create crop box
         case ACTION_CROP:
-          if (range.x || range.y) {
-            offset = getOffset(this.cropper);
-            left = this.startX - offset.left;
-            top = this.startY - offset.top;
-            width = cropBoxData.minWidth;
-            height = cropBoxData.minHeight;
-
-            if (range.x > 0) {
-              action = range.y > 0 ? ACTION_SOUTH_EAST :
-                (range.y < 0 ? ACTION_NORTH_EAST : ACTION_EAST);
-            } else if (range.x < 0) {
-              left -= width;
-              action = range.y > 0 ? ACTION_SOUTH_WEST :
-                (range.y < 0 ? ACTION_NORTH_WEST : ACTION_WEST);
-            } else {
-              action = range.y > 0 ? ACTION_SOUTH : ACTION_NORTH;
-            }
+          if (!range.x || !range.y) {
+            renderable = false;
+            break;
+          }
 
-            if (range.y < 0) {
-              top -= height;
-            }
+          offset = getOffset(this.cropper);
+          left = this.startX - offset.left;
+          top = this.startY - offset.top;
+          width = cropBoxData.minWidth;
+          height = cropBoxData.minHeight;
+
+          if (range.x > 0) {
+            action = range.y > 0 ? ACTION_SOUTH_EAST : ACTION_NORTH_EAST;
+          } else if (range.x < 0) {
+            left -= width;
+            action = range.y > 0 ? ACTION_SOUTH_WEST : ACTION_NORTH_WEST;
+          }
 
-            // Show the crop box if is hidden
-            if (!this.isCropped) {
-              removeClass(this.cropBox, CLASS_HIDDEN);
-              this.isCropped = true;
+          if (range.y < 0) {
+            top -= height;
+          }
 
-              if (this.isLimited) {
-                this.limitCropBox(true, true);
-              }
+          // Show the crop box if is hidden
+          if (!this.isCropped) {
+            removeClass(this.cropBox, CLASS_HIDDEN);
+            this.isCropped = true;
+
+            if (this.isLimited) {
+              this.limitCropBox(true, true);
             }
           }
 

docs/index.html

@@ -5,7 +5,7 @@
   <meta http-equiv="x-ua-compatible" content="ie=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="JavaScript image cropper.">
-  <meta name="keywords" content="HTML, CSS, JS, JavaScript, image cropping, image crop, image move, image zoom, image rotate, image scale, front-end, frontend, web development">
+  <meta name="keywords" content="HTML, CSS, JS, JavaScript, image crop, image move, image zoom, image rotate, image scale, front-end, frontend, web development">
   <meta name="author" content="Fengyuan Chen">
   <title>Cropper</title>
   <link rel="apple-touch-icon" href="apple-touch-icon.png">
@@ -37,7 +37,7 @@
       </div>
       <nav class="collapse navbar-collapse" id="navbar-collapse-1" role="navigation">
         <ul class="nav navbar-nav navbar-right">
-          <li><a href="https://github.com/fengyuanchen/cropperjs/tree/v0.3.1/README.md">Docs</a></li>
+          <li><a href="https://github.com/fengyuanchen/cropperjs/tree/v0.3.2/README.md">Docs</a></li>
           <li><a href="https://github.com/fengyuanchen/cropperjs">Github</a></li>
           <li><a href="https://chenfengyuan.com">About</a></li>
           <li><a href="https://fengyuanchen.github.io">More</a></li>
@@ -49,7 +49,7 @@
   <!-- Jumbotron -->
   <div class="jumbotron docs-jumbotron">
     <div class="container">
-      <h1>Cropper <small class="version">v0.3.1</small></h1>
+      <h1>Cropper <small class="version">v0.3.2</small></h1>
       <p class="lead">JavaScript image cropper.</p>
     </div>
   </div>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "cropperjs",
   "description": "JavaScript image cropper.",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "main": "dist/cropper.js",
   "license": "MIT",
   "repository": "fengyuanchen/cropperjs",