Release v2.3.3

CHANGELOG.md

@@ -1,6 +1,12 @@
 # Changelog
 
 
+## 2.3.3 (Aug 10, 2016)
+
+- Allow scroll when the `dragMode` is "none" on touch screens (#727).
+- Fixed the issue of orientation transform (#740).
+
+
 ## 2.3.2 (Jun 8, 2016)
 
 - Fixed wrong property reference (#705)

README.md

@@ -11,17 +11,17 @@
 
 ## Table of contents
 
-  - [Features](#features)
-  - [Main](#main)
-  - [Getting started](#getting-started)
-  - [Options](#options)
-  - [Methods](#methods)
-  - [Events](#events)
-  - [No conflict](#no-conflict)
-  - [Browser support](#browser-support)
-  - [Contributing](#contributing)
-  - [Versioning](#versioning)
-  - [License](#license)
+- [Features](#features)
+- [Main](#main)
+- [Getting started](#getting-started)
+- [Options](#options)
+- [Methods](#methods)
+- [Events](#events)
+- [No conflict](#no-conflict)
+- [Browser support](#browser-support)
+- [Contributing](#contributing)
+- [Versioning](#versioning)
+- [License](#license)
 
 
 
@@ -62,8 +62,8 @@ Four quick start options are available:
 
 - [Download the latest release](https://github.com/fengyuanchen/cropper/archive/master.zip).
 - Clone the repository: `git clone https://github.com/fengyuanchen/cropper.git`.
-- Install with [NPM](http://npmjs.org): `npm install cropper`.
-- Install with [Bower](http://bower.io): `bower install cropper`.
+- Install with [NPM](https://npmjs.com): `npm install cropper`.
+- Install with [Bower](https://bower.io): `bower install cropper`.
 
 
 
@@ -116,7 +116,24 @@ $('#image').cropper({
 
 #### FAQ
 
-See the [FAQ](FAQ.md) documentation.
+##### How to crop a new area after zoom in or zoom out?
+
+> Just double click your mouse to enter crop mode.
+
+
+##### How to move the image after crop an area?
+
+> Just double click your mouse to enter move mode.
+
+
+##### How to fix aspect ratio in free ratio mode?
+
+> Just hold the `shift` key when you resize the crop box.
+
+
+##### How to crop a square area in free ratio mode?
+
+> Just hold the `shift` key when you crop on the image.
 
 
 #### Notes

dist/cropper.css

@@ -1,11 +1,11 @@
 /*!
- * Cropper v2.3.2
+ * Cropper v2.3.3
  * https://github.com/fengyuanchen/cropper
  *
  * Copyright (c) 2014-2016 Fengyuan Chen and contributors
  * Released under the MIT license
  *
- * Date: 2016-06-08T12:14:46.286Z
+ * Date: 2016-08-10T08:58:55.176Z
  */
 .cropper-container {
   font-size: 0;
@@ -19,10 +19,6 @@
           user-select: none;
 
   direction: ltr !important;
-  -ms-touch-action: none;
-      touch-action: none;
-  -webkit-tap-highlight-color: transparent;
-  -webkit-touch-callout: none;
 }
 
 .cropper-container img {

dist/cropper.js

@@ -1,11 +1,11 @@
 /*!
- * Cropper v2.3.2
+ * Cropper v2.3.3
  * https://github.com/fengyuanchen/cropper
  *
  * Copyright (c) 2014-2016 Fengyuan Chen and contributors
  * Released under the MIT license
  *
- * Date: 2016-06-08T12:14:46.286Z
+ * Date: 2016-08-10T08:58:55.176Z
  */
 
 (function (factory) {
@@ -64,10 +64,10 @@
   var EVENT_ZOOM = 'zoom.' + NAMESPACE;
 
   // RegExps
-  var REGEXP_ACTIONS = /e|w|s|n|se|sw|ne|nw|all|crop|move|zoom/;
-  var REGEXP_DATA_URL = /^data\:/;
-  var REGEXP_DATA_URL_HEAD = /^data\:([^\;]+)\;base64,/;
-  var REGEXP_DATA_URL_JPEG = /^data\:image\/jpeg.*;base64,/;
+  var REGEXP_ACTIONS = /^(e|w|s|n|se|sw|ne|nw|all|crop|move|zoom)$/;
+  var REGEXP_DATA_URL = /^data:/;
+  var REGEXP_DATA_URL_HEAD = /^data:([^;]+);base64,/;
+  var REGEXP_DATA_URL_JPEG = /^data:image\/jpeg.*;base64,/;
 
   // Data keys
   var DATA_PREVIEW = 'preview';
@@ -178,13 +178,17 @@
     var scaleX = options.scaleX;
     var scaleY = options.scaleY;
 
-    // Scale should come first before rotate (#633)
-    if (isNumber(scaleX) && isNumber(scaleY)) {
-      transforms.push('scale(' + scaleX + ',' + scaleY + ')');
+    // Rotate should come first before scale to match orientation transform
+    if (isNumber(rotate) && rotate !== 0) {
+      transforms.push('rotate(' + rotate + 'deg)');
     }
 
-    if (isNumber(rotate)) {
-      transforms.push('rotate(' + rotate + 'deg)');
+    if (isNumber(scaleX) && scaleX !== 1) {
+      transforms.push('scaleX(' + scaleX + ')');
+    }
+
+    if (isNumber(scaleY) && scaleY !== 1) {
+      transforms.push('scaleY(' + scaleY + ')');
     }
 
     return transforms.length ? transforms.join(' ') : 'none';
@@ -263,15 +267,15 @@
       context.translate(translateX, translateY);
     }
 
-    // Scale should come first before rotate (#633, #709)
-    if (scalable) {
-      context.scale(scaleX, scaleY);
-    }
-
+    // Rotate should come first before scale as in the "getTransform" function
     if (rotatable) {
       context.rotate(rotate * Math.PI / 180);
     }
 
+    if (scalable) {
+      context.scale(scaleX, scaleY);
+    }
+
     context.drawImage(image, floor(dstX), floor(dstY), floor(dstWidth), floor(dstHeight));
 
     if (advanced) {
@@ -528,9 +532,9 @@
       var options = this.options;
       var orientation = getOrientation(arrayBuffer);
       var image = this.image;
-      var rotate;
-      var scaleX;
-      var scaleY;
+      var rotate = 0;
+      var scaleX = 1;
+      var scaleY = 1;
 
       if (orientation > 1) {
         this.url = arrayBufferToDataURL(arrayBuffer);

docs/index.html

@@ -12,7 +12,7 @@
   <link rel="shortcut icon" href="favicon.ico">
   <link rel="icon" href="favicon.ico">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <link rel="stylesheet" href="css/cropper.min.css">
   <link rel="stylesheet" href="css/main.css">
 
@@ -53,11 +53,11 @@
   <!-- Jumbotron -->
   <div class="jumbotron docs-jumbotron">
     <div class="container">
-      <h1>Cropper <small class="version">v2.3.2</small></h1>
+      <h1>Cropper <small class="version">v2.3.3</small></h1>
       <p class="lead">A simple jQuery image cropping plugin.</p>
       <div class="docs-carbonads-container">
         <div class="docs-carbonads">
-          <script id="_carbonads_js" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=fengyuanchen" async></script>
+          <script id="_carbonads_js" src="//cdn.carbonads.com/carbon.js?zoneid=1673&amps;serve=C6AILKT&amps;placement=fengyuanchen" async></script>
         </div>
       </div>
     </div>
@@ -544,8 +544,8 @@ <h4 class="modal-title" id="getCroppedCanvasTitle">Cropped</h4>
   </footer>
 
   <!-- Scripts -->
-  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
-  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
+  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   <script src="https://fengyuanchen.github.io/js/common.js"></script>
   <script src="js/cropper.min.js"></script>
   <script src="js/main.js"></script>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "cropper",
   "description": "A simple jQuery image cropping plugin.",
-  "version": "2.3.2",
+  "version": "2.3.3",
   "main": "dist/cropper.js",
   "license": "MIT",
   "repository": "fengyuanchen/cropper",
@@ -30,24 +30,28 @@
     "development"
   ],
   "dependencies": {
-    "jquery": ">= 1.9.1"
+    "bootstrap": "^3.3.7",
+    "font-awesome": "^4.6.3",
+    "jquery": "^1.12.4",
+    "qunitjs": "^2.0.1"
   },
   "devDependencies": {
     "gulp": "^3.9.1",
     "gulp-autoprefixer": "^3.1.0",
     "gulp-concat": "^2.6.0",
     "gulp-csscomb": "^3.0.6",
-    "gulp-csslint": "^0.3.0",
+    "gulp-csslint": "^0.3.1",
     "gulp-htmlcomb": "^0.1.0",
-    "gulp-jscs": "^3.0.2",
-    "gulp-jshint": "^1.12.0",
+    "gulp-jscs": "^4.0.0",
+    "gulp-jshint": "^2.0.1",
     "gulp-load-plugins": "^1.2.0",
     "gulp-minify-css": "^1.2.4",
     "gulp-qunit": "^1.3.0",
     "gulp-rename": "^1.2.2",
     "gulp-replace": "^0.5.4",
-    "gulp-sass": "^2.1.1",
+    "gulp-sass": "^2.3.2",
     "gulp-sourcemaps": "^1.6.0",
-    "gulp-uglify": "^1.5.3"
+    "gulp-uglify": "^2.0.0",
+    "jshint": "^2.9.2"
   }
 }