#119: Add "checkImageOrigin" option.

Gruntfile.js

@@ -131,10 +131,6 @@ module.exports = function (grunt) {
         src: "**",
         dest: "docs/dist",
         filter: "isFile"
-      },
-      others: {
-        src: "README.md",
-        dest: "docs/"
       }
     },
     watch: {
@@ -151,6 +147,6 @@ module.exports = function (grunt) {
 
   grunt.registerTask("build", ["clean:build", "copy:build"]);
   grunt.registerTask("release", ["clean:release", "copy:release"]);
-  grunt.registerTask("docs", ["clean:docs", "copy:docs", "copy:others"]);
+  grunt.registerTask("docs", ["clean:docs", "copy:docs"]);
   grunt.registerTask("default", ["clean:dist", "jshint", "jscs", "uglify", "copy:dist", "autoprefixer", "csscomb", "csslint", "cssmin", "htmlcomb", "usebanner", "build", "release", "docs"]);
 };

README.md

@@ -208,6 +208,14 @@ Enable to zoom the image.
 Enable to rotate the image.
 
 
+#### checkImageOrigin
+
+- type: `Boolean`
+- default: `true`
+
+By default, the plugin will check the image origin, and if it is a cross-origin image, a "crossOrigin" attribute will be added to the image element to enable "rotate" and "getDataURL".
+
+
 #### minWidth
 
 - type: `Number`
@@ -298,8 +306,8 @@ An event handler of the "dragend.cropper" event.
 - Rotate the image (Replace the original image with a new rotated image which was generated by canvas).
 - Param: a number (positive number for rotate right, negative number for rotate left).
 - Usage: `$().cropper("rotate", 90)` or `$().cropper("rotate", -90)`.
-- Note: Be sure the browser supports canvas before call this method.
-
+- **Note**: Be sure the browser supports canvas before call this method.
+- **Note**: Don't call this in IE9/10 (not support `crossOrigin` attribute) when it's a cross-origin image.
 
 #### enable
 
@@ -408,6 +416,8 @@ $().cropper("getDataURL", {
 ```
 
 **Note:** Be sure the browser supports canvas before call this method.
+**Note:** Don't call this in IE9/10 (not support `crossOrigin` attribute) when it's a cross-origin image.
+
 
 
 ## Events

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "cropper",
   "description": "A simple jQuery image cropping plugin.",
-  "version": "0.7.5-beta",
+  "version": "0.7.5",
   "main": "dist/cropper.js",
   "keywords": [
     "image",

demos/index.html

@@ -241,15 +241,16 @@
         },
         preview: ".preview",
 
-        // multiple: FALSE,
-        // autoCrop: TRUE,
-        // dragCrop: TRUE,
-        // dashed: TRUE,
-        // modal: TRUE,
-        // movable: TRUE,
-        // resizable: TRUE,
-        // zoomable: TRUE,
-        // rotatable: TRUE,
+        // multiple: true,
+        // autoCrop: false,
+        // dragCrop: false,
+        // dashed: false,
+        // modal: false,
+        // movable: false,
+        // resizable: false,
+        // zoomable: false,
+        // rotatable: false,
+        // checkImageOrigin: false,
 
         // maxWidth: 480,
         // maxHeight: 270,

dist/cropper.css

@@ -1,5 +1,5 @@
 /*!
- * Cropper v0.7.5-beta
+ * Cropper v0.7.5
  * https://github.com/fengyuanchen/cropper
  *
  * Copyright 2014 Fengyuan Chen

dist/cropper.js

@@ -1,5 +1,5 @@
 /*!
- * Cropper v0.7.5-beta
+ * Cropper v0.7.5
  * https://github.com/fengyuanchen/cropper
  *
  * Copyright 2014 Fengyuan Chen
@@ -138,6 +138,7 @@
           $this = this.$element,
           element = this.element,
           image = this.image,
+          crossOrigin = "",
           $clone,
           url;
 
@@ -153,11 +154,16 @@
 
       // Reset image rotate degree
       if (this.replaced) {
-        this.replaced = FALSE;
         image.rotate = 0;
       }
 
-      this.$clone = ($clone = $("<img" + ((typeof $this.attr("crossOrigin") !== STRING_UNDEFINED || this.isCrossOriginURL(url)) ? " crossOrigin" : "") + ' src="' + url + '">'));
+      if (this.defaults.checkImageOrigin) {
+        if ($this.prop("crossOrigin") || this.isCrossOriginURL(url)) {
+          crossOrigin = " crossOrigin";
+        }
+      }
+
+      this.$clone = ($clone = $("<img" + crossOrigin + ' src="' + url + '">'));
 
       $clone.one("load", function () {
         image.naturalWidth = this.naturalWidth || $clone.width();
@@ -406,7 +412,13 @@
       if (image._width !== cropper.width || image._height !== cropper.height) {
         $.extend(image, defaultImage);
       } else {
-        image = $.extend(defaultImage, image);
+        image = $.extend({}, defaultImage, image);
+
+        // Reset image ratio
+        if (this.replaced) {
+          this.replaced = FALSE;
+          image.ratio = defaultImage.ratio;
+        }
       }
 
       this.image = image;
@@ -1478,6 +1490,7 @@
     resizable: TRUE,
     zoomable: TRUE,
     rotatable: TRUE,
+    checkImageOrigin: TRUE,
 
     // Dimensions
     minWidth: 0,

package.json

@@ -1,7 +1,7 @@
 {
   "name": "cropper",
   "description": "A simple jQuery image cropping plugin.",
-  "version": "0.7.5-beta",
+  "version": "0.7.5",
   "main": "dist/cropper.js",
   "keywords": [
     "image",

src/cropper.js

@@ -130,6 +130,7 @@
           $this = this.$element,
           element = this.element,
           image = this.image,
+          crossOrigin = "",
           $clone,
           url;
 
@@ -145,11 +146,16 @@
 
       // Reset image rotate degree
       if (this.replaced) {
-        this.replaced = FALSE;
         image.rotate = 0;
       }
 
-      this.$clone = ($clone = $("<img" + ((typeof $this.attr("crossOrigin") !== STRING_UNDEFINED || this.isCrossOriginURL(url)) ? " crossOrigin" : "") + ' src="' + url + '">'));
+      if (this.defaults.checkImageOrigin) {
+        if ($this.prop("crossOrigin") || this.isCrossOriginURL(url)) {
+          crossOrigin = " crossOrigin";
+        }
+      }
+
+      this.$clone = ($clone = $("<img" + crossOrigin + ' src="' + url + '">'));
 
       $clone.one("load", function () {
         image.naturalWidth = this.naturalWidth || $clone.width();
@@ -398,7 +404,13 @@
       if (image._width !== cropper.width || image._height !== cropper.height) {
         $.extend(image, defaultImage);
       } else {
-        image = $.extend(defaultImage, image);
+        image = $.extend({}, defaultImage, image);
+
+        // Reset image ratio
+        if (this.replaced) {
+          this.replaced = FALSE;
+          image.ratio = defaultImage.ratio;
+        }
       }
 
       this.image = image;
@@ -1470,6 +1482,7 @@
     resizable: TRUE,
     zoomable: TRUE,
     rotatable: TRUE,
+    checkImageOrigin: TRUE,
 
     // Dimensions
     minWidth: 0,