Merge from v0.3.0

CHANGELOG.md

@@ -1,6 +1,27 @@
 # Changelog
 
 
+## 0.3.0 (Oct 28, 2015)
+
+- Supports four view modes
+- Supports three drag modes
+- Makes the crop box's borders and handlers visible when overflow
+- Added some examples
+- Fixed some issues
+
+
+### Options
+
+- Add `viewMode`
+- Add `dragMode`
+- Rename `touchDragZoom` to `zoomOnTouch`
+- Rename `mouseWheelZoom` to `zoomOnWheel`
+- Rename `doubleClickToggle` to `toggleDragModeOnDblclick`
+- Rename `checkImageOrigin` to `checkCrossOrigin`
+- Remove `strict`
+- Remove `dragCrop`
+
+
 ## 0.2.1 (Oct 28, 2015)
 
 - Fix the error jQuery reference on the `setCanvasData` method

README.md

@@ -17,6 +17,7 @@
 - Supports scale (flip)
 - Supports canvas
 - Supports multiple croppers
+- Supports to crop image in the browser-side with canvas
 - Cross-browser support
 
 
@@ -27,8 +28,8 @@
 dist/
 ├── cropper.css     ( 5 KB)
 ├── cropper.min.css ( 4 KB)
-├── cropper.js      (78 KB)
-└── cropper.min.js  (27 KB)
+├── cropper.js      (80 KB)
+└── cropper.min.js  (28 KB)
 ```
 
 
@@ -45,7 +46,6 @@ Four quick start options are available:
 - Install with [Bower](http://bower.io): `bower install cropperjs`.
 
 
-
 ### Installation
 
 Include files:
@@ -55,13 +55,6 @@ Include files:
 <script src="/path/to/cropper.js"></script>
 ```
 
-#### [RawGit](https://rawgit.com/)
-
-```html
-<link  href="https://cdn.rawgit.com/fengyuanchen/cropperjs/v0.2.0/dist/cropper.min.css" rel="stylesheet">
-<script src="https://cdn.rawgit.com/fengyuanchen/cropperjs/v0.2.0/dist/cropper.min.js"></script>
-```
-
 
 ### Usage
 
@@ -111,7 +104,7 @@ See the [FAQ](FAQ.md) documentation.
 
 #### Known issues
 
-- About `getCroppedCanvas` method: The `canvas.drawImage` API in some Mac OS / iOS browsers will rotate an image with EXIF Orientation automatically, so the output cropped canvas may be incorrect. To fix this, you may upload the cropped data and crop the image in the server-side, see the example: [Crop Avatar](examples/crop-avatar). Or you may handle the EXIF Orientation in server first before to use cropper.
+- About `getCroppedCanvas` method: The `canvas.drawImage` API in some Mac OS / iOS browsers will rotate an image with EXIF Orientation automatically, so the output cropped canvas may be incorrect. To fix this, you may upload the cropped data and crop the image in the server-side, see the example: [Crop Avatar](https://github.com/fengyuanchen/cropper/tree/master/examples/crop-avatar). Or you may handle the EXIF Orientation with canvas as [JavaScript Load Image](https://github.com/blueimp/JavaScript-Load-Image) or in server as PHP first before to use cropper.
 
 - [Known iOS resource limits](https://developer.apple.com/library/mac/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html): As iOS devices limit memory, the browser may crash when you are cropping a large image (iPhone camera resolution). To avoid this, you may resize the image first (below 1024px) before start a cropper.
 
@@ -123,6 +116,31 @@ You may set cropper options with `new Cropper(image, options)`.
 If you want to change the global default options, You may use `Cropper.setDefaults(options)`.
 
 
+### viewMode
+
+- Type: `Number`
+- Default: `0`
+- Options:
+  - `0`: the crop box is just within the container
+  - `1`: the crop box should be within the canvas
+  - `2`: the canvas should not be within the container
+  - `3`: the container should be within the canvas
+
+Define the view mode of the cropper.
+
+
+### dragMode
+
+- Type: `String`
+- Default: `'crop'`
+- Options:
+  - `'crop'`: create a new crop box
+  - `'move'`: move the canvas
+  - `'none'`: do nothing
+
+Define the dragging mode of the cropper.
+
+
 ### aspectRatio
 
 - Type: `Number`
@@ -136,7 +154,7 @@ Set the aspect ratio of the crop box. By default, the crop box is free ratio.
 - Type: `Object`
 - Default: `null`
 
-The previous cropped data if you had stored, will be passed to `setData` method automatically.
+The previous cropped data if you had stored, will be passed to `setData` method automatically when built.
 
 
 ### preview
@@ -155,14 +173,6 @@ Add extra elements (containers) for previewing.
 - If preview is not getting properly displayed, set `overflow:hidden` to the preview container.
 
 
-### strict
-
-- Type: `Boolean`
-- Default: `true`
-
-In strict mode, the crop box cannot be outside of the canvas (image wrapper).
-
-
 ### responsive
 
 - Type: `Boolean`
@@ -171,7 +181,7 @@ In strict mode, the crop box cannot be outside of the canvas (image wrapper).
 Rebuild the cropper when resize the window.
 
 
-### checkImageOrigin
+### checkCrossOrigin
 
 - Type: `Boolean`
 - Default: `true`
@@ -237,14 +247,6 @@ Enable to crop the image automatically when initialize.
 A number between 0 and 1. Define the automatic cropping area size (percentage).
 
 
-### dragCrop
-
-- Type: `Boolean`
-- Default: `true`
-
-Enable to remove the current crop box and create a new one by dragging over the image.
-
-
 ### movable
 
 - Type: `Boolean`
@@ -277,7 +279,15 @@ Enable to scale the image.
 Enable to zoom the image.
 
 
-### mouseWheelZoom
+### zoomOnTouch
+
+- Type: `Boolean`
+- Default: `true`
+
+Enable to zoom the image by dragging touch.
+
+
+### zoomOnWheel
 
 - Type: `Boolean`
 - Default: `true`
@@ -293,14 +303,6 @@ Enable to zoom the image by wheeling mouse.
 Define zoom ratio when zoom the image by wheeling mouse.
 
 
-### touchDragZoom
-
-- Type: `Boolean`
-- Default: `true`
-
-Enable to zoom the image by dragging touch.
-
-
 ### cropBoxMovable
 
 - Type: `Boolean`
@@ -317,12 +319,12 @@ Enable to move the crop box.
 Enable to resize the crop box.
 
 
-### doubleClickToggle
+### toggleDragModeOnDblclick
 
 - Type: `Boolean`
 - Default: `true`
 
-Enable to toggle drag mode between "crop" and "move" when double click on the cropper.
+Enable to toggle drag mode between "crop" and "move" when click twice on the cropper.
 
 
 ### minContainerWidth

demo/css/main.css

@@ -71,7 +71,6 @@ body {
   background-color: #f7f7f7;
   width: 100%;
   text-align: center;
-  overflow: hidden;
 }
 
 .img-container {
@@ -98,6 +97,7 @@ body {
   float: left;
   margin-right: 10px;
   margin-bottom: 10px;
+  overflow: hidden;
 }
 
 .img-preview > img {
@@ -211,3 +211,47 @@ body {
 .docs-cropped .modal-body > canvas {
   max-width: 100%;
 }
+
+
+/* Footer */
+
+.docs-footer {
+  overflow: hidden;
+}
+
+.hearts {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 30px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  color: #ddd;
+  font-size: 18px;
+  line-height: 30px;
+  text-align: center;
+}
+
+.hearts:hover {
+  color: #ff4136;
+}
+
+.hearts:before {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  left: 0;
+  display: block;
+  height: 0;
+  border-top: 1px solid #eee;
+  content: " ";
+}
+
+.hearts:after {
+  position: relative;
+  z-index: 1;
+  padding-left: 8px;
+  padding-right: 8px;
+  background-color: #fff;
+  content: "♥";
+}