Release v0.5.5

CHANGELOG.md

@@ -1,6 +1,12 @@
 # Changelog
 
 
+## 0.5.5 (Jan 1, 2016)
+
+- Fixed a dimension bug in the "getCroppedCanvas" method.
+- Added an example for cropping round image.
+
+
 ## 0.5.4 (Dec 28, 2015)
 
 - Supports to zoom from event triggering point.

README.md

@@ -46,7 +46,7 @@
 dist/
 ├── cropper.css     ( 5 KB)
 ├── cropper.min.css ( 4 KB)
-├── cropper.js      (87 KB)
+├── cropper.js      (88 KB)
 └── cropper.min.js  (28 KB)
 ```
 
@@ -1023,4 +1023,5 @@ Maintained under the [Semantic Versioning guidelines](http://semver.org/).
 
 - [react-cropperjs](https://github.com/TAPP-TV/react-cropperjs) by @pbojinov
 
+
 [⬆ back to top](#table-of-contents)

dist/cropper.css

@@ -1,11 +1,11 @@
 /*!
- * Cropper v0.5.4
+ * Cropper.js v0.5.5
  * https://github.com/fengyuanchen/cropperjs
  *
- * Copyright (c) 2015 Fengyuan Chen
+ * Copyright (c) 2015-2016 Fengyuan Chen
  * Released under the MIT license
  *
- * Date: 2015-12-28T03:39:33.053Z
+ * Date: 2016-01-01T08:10:03.671Z
  */
 .cropper-container {
   font-size: 0;

dist/cropper.js

@@ -1,11 +1,11 @@
 /*!
- * Cropper v0.5.4
+ * Cropper.js v0.5.5
  * https://github.com/fengyuanchen/cropperjs
  *
- * Copyright (c) 2015 Fengyuan Chen
+ * Copyright (c) 2015-2016 Fengyuan Chen
  * Released under the MIT license
  *
- * Date: 2015-12-28T03:39:49.283Z
+ * Date: 2016-01-01T08:10:31.084Z
  */
 
 (function (global, factory) {
@@ -226,7 +226,7 @@
     var style = element.style;
 
     each(styles, function (value, property) {
-      if (REGEXP_SUFFIX.test(property)) {
+      if (REGEXP_SUFFIX.test(property) && isNumber(value)) {
         value += 'px';
       }
 
@@ -410,18 +410,14 @@
     };
   }
 
-  function getByTag(element, tagName, index) {
-    var elements = element.getElementsByTagName(tagName);
-
-    return isNumber(index) ? elements[index] : elements;
+  function getByTag(element, tagName) {
+    return element.getElementsByTagName(tagName);
   }
 
-  function getByClass(element, className, index) {
-    var elements = element.getElementsByClassName ?
+  function getByClass(element, className) {
+    return element.getElementsByClassName ?
       element.getElementsByClassName(className) :
       element.querySelectorAll('.' + className);
-
-    return isNumber(index) ? elements[index] : elements;
   }
 
   function createElement(tagName) {
@@ -969,12 +965,12 @@
 
       // Create cropper elements
       _this.container = container = element.parentNode;
-      _this.cropper = cropper = getByClass(template, 'cropper-container', 0);
-      _this.canvas = canvas = getByClass(cropper, 'cropper-canvas', 0);
-      _this.dragBox = dragBox = getByClass(cropper, 'cropper-drag-box', 0);
-      _this.cropBox = cropBox = getByClass(cropper, 'cropper-crop-box', 0);
-      _this.viewBox = getByClass(cropper, 'cropper-view-box', 0);
-      _this.face = face = getByClass(cropBox, 'cropper-face', 0);
+      _this.cropper = cropper = getByClass(template, 'cropper-container')[0];
+      _this.canvas = canvas = getByClass(cropper, 'cropper-canvas')[0];
+      _this.dragBox = dragBox = getByClass(cropper, 'cropper-drag-box')[0];
+      _this.cropBox = cropBox = getByClass(cropper, 'cropper-crop-box')[0];
+      _this.viewBox = getByClass(cropper, 'cropper-view-box')[0];
+      _this.face = face = getByClass(cropBox, 'cropper-face')[0];
 
       appendChild(canvas, image);
 
@@ -1010,7 +1006,7 @@
       }
 
       if (!options.center) {
-        addClass(getByClass(cropBox, 'cropper-center', 0), CLASS_HIDDEN);
+        addClass(getByClass(cropBox, 'cropper-center'), CLASS_HIDDEN);
       }
 
       if (options.background) {
@@ -1728,7 +1724,7 @@
         return;
       }
 
-      setStyle(getByTag(_this.viewBox, 'img', 0), extend({
+      setStyle(getByTag(_this.viewBox, 'img')[0], extend({
         width: width,
         height: height,
         marginLeft: -left,
@@ -1759,7 +1755,7 @@
           height: newHeight
         });
 
-        setStyle(getByTag(element, 'img', 0), extend({
+        setStyle(getByTag(element, 'img')[0], extend({
           width: width * ratio,
           height: height * ratio,
           marginLeft: -left * ratio,
@@ -3122,9 +3118,9 @@
         }
       }
 
-      // The canvas element will use `Math.floor` on a float number, so round first
-      canvasWidth = round(scaledWidth || originalWidth);
-      canvasHeight = round(scaledHeight || originalHeight);
+      // The canvas element will use `Math.floor` on a float number, so floor first
+      canvasWidth = floor(scaledWidth || originalWidth);
+      canvasHeight = floor(scaledHeight || originalHeight);
 
       canvas = createElement('canvas');
       canvas.width = canvasWidth;

docs/index.html

@@ -41,7 +41,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.5.4/README.md">Docs</a></li>
+          <li><a href="https://github.com/fengyuanchen/cropperjs/tree/v0.5.5/README.md">Docs</a></li>
           <li><a href="https://github.com/fengyuanchen/cropperjs">GitHub</a></li>
           <li><a href="http://chenfengyuan.com">About</a></li>
           <li><a href="http://fengyuanchen.github.io">More</a></li>
@@ -53,7 +53,7 @@
   <!-- Jumbotron -->
   <div class="jumbotron docs-jumbotron">
     <div class="container">
-      <h1>Cropper.js <small class="version">v0.5.4</small></h1>
+      <h1>Cropper.js <small class="version">v0.5.5</small></h1>
       <p class="lead">JavaScript image cropper.</p>
       <div class="docs-carbonads-container">
         <div class="docs-carbonads">

package.json

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