add cropper's grid

.gitignore

@@ -1,2 +1,3 @@
 .idea
-node_modules
+node_modules
+.history

README.md

@@ -164,7 +164,7 @@ Object key         | Default Value | Description
 width               | `200`   | cropper's width
 height              | `200`      | cropper's height
 overlayColor        | `#000`  | color of background overlay
-overlayOpacity      | `0.3`  | opacity of background overlay
+overlayOpacity      | `0.7`  | opacity of background overlay
 transparentCorner     | `false`  | when set to `true`, cropper's controlling corners are rendered as transparent inside
 hasRotatingPoint     | `false`  | when set to `false`, cropper's controlling rotating point will not be visible or selectable
 hasControls     | `true`  | when set to `false`, cropper's controls are not displayed and can not be used to manipulate object

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-image-markup",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "vue-image-markup will provide you to edit uploaded image easily and save it.",
   "main": "src/Editor.vue",
   "repository": {

src/Editor.vue

@@ -102,6 +102,7 @@
             },
             clear() {
                 this.canvas.clear();
+                this.cancelCroppingImage()
             },
             changeColor(colorProperty) {
                 this.color = colorProperty;
@@ -184,7 +185,7 @@
                             width: (params && params.width) ? params.width : 200,
                             height: (params && params.height) ? params.height : 200,
                             overlayColor: (params && params.overlayColor) ? params.overlayColor : "#000",
-                            overlayOpacity: (params && params.overlayOpacity) ? params.overlayOpacity : 0.3,
+                            overlayOpacity: (params && params.overlayOpacity) ? params.overlayOpacity : 0.7,
                             transparentCorner: (params && params.transparentCorner) ? params.transparentCorner : false,
                             hasRotatingPoint: (params && params.hasRotatingPoint) ? params.hasRotatingPoint : false,
                             hasControls: (params && params.hasControls) ? params.hasControls : true,

src/assets/js/crop.js

@@ -71,7 +71,7 @@ export default (function () {
                 left:  (oImg1.width - properties.width)/ 2,
                 top:  (oImg1.height - properties.height)/ 2,
                 width: properties.width,
-                height: properties.height,
+                height: properties.height,              
                 fill: '',
                 imageWidth: oImg1.width,
                 imageHeight: oImg1.height,
@@ -82,7 +82,24 @@ export default (function () {
                 cornerStyle: properties.cornerStyle,
                 transparentCorners: properties.transparentCorners,
                 hasRotatingPoint: properties.hasRotatingPoint,
-
+                lockUniScaling:true,
+                noScaleCache:false,
+                strokeUniform:true,
+                clipTo: function(context) {
+                  context.translate(- this.width/2, - this.height/2);
+
+                  for (let x = 0; x <= this.width; x += this.width/3) {
+                      context.moveTo(x , 0);
+                      context.lineTo(x, this.height);
+                  }
+
+                  for (let y = 0; y <= this.height; y += this.height/3) {
+                      context.moveTo(0, y);
+                      context.lineTo(this.width, y);
+                  }
+                  context.strokeStyle = "rgba(0,0,0,0.4)";
+                  context.stroke();   
+              }    
               });
               clipRect = new fabric.Rect({
                 left: -(properties.width /2),
@@ -113,12 +130,12 @@ export default (function () {
           clipRect = new fabric.Rect({
               left: target.left - (overlay.width / 2),
               top: target.top - (overlay.height / 2),
-              width: properties.width,
-              height: properties.height,
+              width: target.width,
+              height: target.height,
               fill: '',
               scaleX: target.scaleX,
-              scaleY: target.scaleY,
-            });
+              scaleY: target.scaleY,             
+            });           
           overlay.set("clipPath",clipRect)
           inst.canvas.renderAll()       
 
@@ -128,8 +145,8 @@ export default (function () {
             clipRect = new fabric.Rect({
                 left: target.left - (overlay.width / 2),
                 top: target.top - (overlay.height / 2),
-                width: properties.width,
-                height: properties.height,
+                width: target.width,
+                height: target.height,
                 fill: '',
                 scaleX: target.scaleX,
                 scaleY: target.scaleY,