build: release 2.0.0-alpha

CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 2.0.0-alpha (Mar 10, 2018)
+
+### Breaking changes
+
+- Integrate the canvas and the crop box for better user experience.
+- Change the properties of the `zoom` event:
+  - `event.detail.ratio` => `event.detail.scale`
+  - `event.detail.oldRatio` => `event.detail.oldScale`
+
+### Features
+
+- Support to create crop box by dragging from left to right, right to left, top to bottom and bottom to top.
+- Add 4 new options: `maxCanvasWidth`, `maxCanvasHeight`, `maxCropBoxWidth` and `maxCropBoxHeight`.
+- Add 2 new properties to the `getCropBoxData` method: `naturalWidth` and `naturalHeight`.
+
 ## 1.5.0 (Mar 10, 2018)
 
 - Add `passive: false` and `capture: true` to wheel event for better performance.

README.md

@@ -814,6 +814,8 @@ Change the canvas (image wrapper) position and size with new data.
     - `top`: the offset top of the crop box
     - `width`: the width of the crop box
     - `height`: the height of the crop box
+    - `naturalWidth`: the natural width of the crop box (read only)
+    - `naturalHeight`: the natural height of the crop box (read only)
 
 Output the crop box position and size data.
 

dist/cropper.css

@@ -1,17 +1,18 @@
 /*!
- * Cropper.js v1.5.0
+ * Cropper.js v2.0.0-alpha
  * https://fengyuanchen.github.io/cropperjs
  *
  * Copyright 2015-present Chen Fengyuan
  * Released under the MIT license
  *
- * Date: 2019-03-10T09:05:08.434Z
+ * Date: 2019-03-10T09:50:40.764Z
  */
 
 .cropper-container {
   direction: ltr;
   font-size: 0;
   line-height: 0;
+  overflow: hidden;
   position: relative;
   -ms-touch-action: none;
   touch-action: none;
@@ -24,34 +25,26 @@
 .cropper-container img {
   display: block;
   height: 100%;
-  image-orientation: 0deg;
   max-height: none !important;
   max-width: none !important;
   min-height: 0 !important;
   min-width: 0 !important;
   width: 100%;
 }
 
-.cropper-wrap-box,
 .cropper-canvas,
 .cropper-drag-box,
-.cropper-crop-box,
-.cropper-modal {
-  bottom: 0;
+.cropper-crop-box {
   left: 0;
   position: absolute;
-  right: 0;
   top: 0;
 }
 
-.cropper-wrap-box,
-.cropper-canvas {
-  overflow: hidden;
-}
-
 .cropper-drag-box {
   background-color: #fff;
+  bottom: 0;
   opacity: 0;
+  right: 0;
 }
 
 .cropper-modal {
@@ -60,7 +53,6 @@
 }
 
 .cropper-view-box {
-  display: block;
   height: 100%;
   outline: 1px solid #39f;
   outline-color: rgba(51, 153, 255, 0.75);
@@ -70,7 +62,6 @@
 
 .cropper-dashed {
   border: 0 dashed #eee;
-  display: block;
   opacity: 0.5;
   position: absolute;
 }
@@ -94,7 +85,6 @@
 }
 
 .cropper-center {
-  display: block;
   height: 0;
   left: 50%;
   opacity: 0.75;
@@ -106,7 +96,7 @@
 .cropper-center::before,
 .cropper-center::after {
   background-color: #eee;
-  content: ' ';
+  content: "";
   display: block;
   position: absolute;
 }
@@ -128,7 +118,6 @@
 .cropper-face,
 .cropper-line,
 .cropper-point {
-  display: block;
   height: 100%;
   opacity: 0.1;
   position: absolute;
@@ -260,7 +249,7 @@
 .cropper-point.point-se::before {
   background-color: #39f;
   bottom: -50%;
-  content: ' ';
+  content: "";
   display: block;
   height: 200%;
   opacity: 0;