Released v1.0.0-rc.1

CHANGELOG.md

@@ -1,6 +1,16 @@
 # Changelog
 
 
+## 1.0.0-rc.1 (Sep 5, 2015)
+
+- Moved from Less to Sass
+- Fixed the issue of `destroy` method (#434)
+- Fixed the issue on IE8 (#319)
+- Added an example for customizing preview
+- Added download button to documentation
+- Added FAQ
+
+
 ## 0.11.1 (Aug 22, 2015)
 
 - Optimize "built" and "crop" events

README.md

@@ -27,7 +27,7 @@
 dist/
 ├── cropper.css     ( 5 KB)
 ├── cropper.min.css ( 4 KB)
-├── cropper.js      (65 KB)
+├── cropper.js      (66 KB)
 └── cropper.min.js  (24 KB)
 ```
 
@@ -912,6 +912,18 @@ As a jQuery plugin, you also need to see the [jQuery Browser Support](http://jqu
 
 
 
+## Contributing
+
+Please read through our [contributing guidelines](CONTRIBUTING.md).
+
+
+
+## Versioning
+
+Maintained under the [Semantic Versioning guidelines](http://semver.org/).
+
+
+
 ## [License](LICENSE.md)
 
 [MIT](http://opensource.org/licenses/MIT) © [Fengyuan Chen](http://github.com/fengyuanchen)

dist/cropper.css

@@ -1,15 +1,17 @@
 /*!
- * Cropper v0.11.1
+ * Cropper v1.0.0-rc.1
  * https://github.com/fengyuanchen/cropper
  *
  * Copyright (c) 2014-2015 Fengyuan Chen and contributors
  * Released under the MIT license
  *
- * Date: 2015-08-22T04:54:51.269Z
+ * Date: 2015-09-05T04:29:22.355Z
  */
 .cropper-container {
   position: relative;
   overflow: hidden;
+  font-size: 0;
+  line-height: 0;
   -ms-touch-action: none;
       touch-action: none;
   -webkit-user-select: none;
@@ -26,12 +28,13 @@
   width: 100%;
   min-width: 0 !important;
   max-width: none !important;
-  height: 100%;
+  height: 100%; 
   min-height: 0 !important;
   max-height: none !important;
 
   image-orientation: 0deg !important;
 }
+
 .cropper-canvas,
 .cropper-drag-box,
 .cropper-crop-box,
@@ -42,62 +45,67 @@
   bottom: 0;
   left: 0;
 }
+
 .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 #69f;
   outline-color: rgba(102, 153, 255, .75);
 }
+
 .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.33333333%;
+  top: 33.33333%;
   left: 0;
   width: 100%;
-  height: 33.33333333%;
+  height: 33.33333%; 
   border-top-width: 1px;
   border-bottom-width: 1px;
 }
 .cropper-dashed.dashed-v {
   top: 0;
-  left: 33.33333333%;
-  width: 33.33333333%;
-  height: 100%;
+  left: 33.33333%;
+  width: 33.33333%;
+  height: 100%; 
   border-right-width: 1px;
   border-left-width: 1px;
 }
+
 .cropper-center {
   position: absolute;
   top: 50%;
   left: 50%;
   display: block;
   width: 0;
   height: 0;
-  filter: alpha(opacity=75);
+  filter: alpha(opacity=75); 
   opacity: .75;
 }
 .cropper-center:before,
-.cropper-center:after {
+  .cropper-center:after {
   position: absolute;
   display: block;
-  content: " ";
+  content: " "; 
   background-color: #eee;
 }
 .cropper-center:before {
@@ -112,21 +120,24 @@
   width: 1px;
   height: 7px;
 }
+
 .cropper-face,
 .cropper-line,
 .cropper-point {
   position: absolute;
   display: block;
   width: 100%;
   height: 100%;
-  filter: alpha(opacity=10);
+  filter: alpha(opacity=10); 
   opacity: .1;
 }
+
 .cropper-face {
   top: 0;
   left: 0;
   background-color: #fff;
 }
+
 .cropper-line {
   background-color: #69f;
 }
@@ -154,11 +165,12 @@
   height: 5px;
   cursor: s-resize;
 }
+
 .cropper-point {
   width: 5px;
   height: 5px;
   background-color: #69f;
-  filter: alpha(opacity=75);
+  filter: alpha(opacity=75); 
   opacity: .75;
 }
 .cropper-point.point-e {
@@ -206,7 +218,7 @@
   width: 20px;
   height: 20px;
   cursor: se-resize;
-  filter: alpha(opacity=100);
+  filter: alpha(opacity=100); 
   opacity: 1;
 }
 .cropper-point.point-se:before {
@@ -218,7 +230,7 @@
   height: 200%;
   content: " ";
   background-color: #69f;
-  filter: alpha(opacity=0);
+  filter: alpha(opacity=0); 
   opacity: 0;
 }
 @media (min-width: 768px) {
@@ -237,32 +249,39 @@
   .cropper-point.point-se {
     width: 5px;
     height: 5px;
-    filter: alpha(opacity=75);
+    filter: alpha(opacity=75); 
     opacity: .75;
   }
 }
+
 .cropper-bg {
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
 }
+
 .cropper-invisible {
-  filter: alpha(opacity=0);
+  filter: alpha(opacity=0); 
   opacity: 0;
 }
+
 .cropper-hide {
   position: absolute;
   display: block;
   width: 0;
   height: 0;
 }
+
 .cropper-hidden {
   display: none !important;
 }
+
 .cropper-move {
   cursor: move;
 }
+
 .cropper-crop {
   cursor: crosshair;
 }
+
 .cropper-disabled .cropper-drag-box,
 .cropper-disabled .cropper-face,
 .cropper-disabled .cropper-line,

dist/cropper.js

@@ -1,11 +1,11 @@
 /*!
- * Cropper v0.11.1
+ * Cropper v1.0.0-rc.1
  * https://github.com/fengyuanchen/cropper
  *
  * Copyright (c) 2014-2015 Fengyuan Chen and contributors
  * Released under the MIT license
  *
- * Date: 2015-08-22T04:55:04.780Z
+ * Date: 2015-09-05T04:29:32.906Z
  */
 
 (function (factory) {
@@ -136,24 +136,22 @@
     return (url + (url.indexOf('?') === -1 ? '?' : '&') + timestamp);
   }
 
-  function getImageData(image) {
-    var naturalWidth = image.naturalWidth;
-    var naturalHeight = image.naturalHeight;
+  function getNaturalSize(image, callback) {
     var newImage;
 
-    // IE8
-    if (!naturalWidth) {
-      newImage = new Image();
-      newImage.src = image.src;
-      naturalWidth = newImage.width;
-      naturalHeight = newImage.height;
+    // Modern browsers
+    if (image.naturalWidth) {
+      return callback(image.naturalWidth, image.naturalHeight);
     }
 
-    return {
-      naturalWidth: naturalWidth,
-      naturalHeight: naturalHeight,
-      aspectRatio: naturalWidth / naturalHeight
+    // IE8: Don't use `new Image()` here (#319)
+    newImage = document.createElement('img');
+
+    newImage.onload = function () {
+      callback(this.width, this.height);
     };
+
+    newImage.src = image.src;
   }
 
   function getTransform(options) {
@@ -362,9 +360,18 @@
     },
 
     start: function () {
-      this.image = getImageData(this.isImg ? this.$element[0] : this.$clone[0]);
-      this.ready = true;
-      this.build();
+      var image = this.isImg ? this.$element[0] : this.$clone[0];
+
+      getNaturalSize(image, $.proxy(function (naturalWidth, naturalHeight) {
+        this.image = {
+          naturalWidth: naturalWidth,
+          naturalHeight: naturalHeight,
+          aspectRatio: naturalWidth / naturalHeight
+        };
+
+        this.ready = true;
+        this.build();
+      }, this));
     },
 
     stop: function () {
@@ -1574,9 +1581,7 @@
 
         // Move canvas
         case ACTION_MOVE:
-          canvas.left += range.x;
-          canvas.top += range.y;
-          this.renderCanvas(true);
+          this.move(range.x, range.y);
           renderable = false;
           break;
 
@@ -1727,6 +1732,7 @@
     replace: function (url) {
       if (!this.disabled && url) {
         if (this.isImg) {
+          this.replaced = true;
           this.$element.attr('src', url);
         }
 
@@ -1757,7 +1763,7 @@
       var $this = this.$element;
 
       if (this.ready) {
-        if (this.isImg) {
+        if (this.isImg && this.replaced) {
           $this.attr('src', this.originalUrl);
         }