Change cropper's size according to image size

lionix-team · Apr 21, 2020 · e5f1997 · e5f1997
1 parent 212bef2
commit e5f1997
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-image-markup",
-  "version": "3.0.9",
+  "version": "3.0.10",
   "description": "vue-image-markup will provide you to edit uploaded image easily and save it.",
   "main": "src/Editor.vue",
   "repository": {

diff --git a/src/assets/js/crop.js b/src/assets/js/crop.js
@@ -9,7 +9,8 @@ export default (function () {
     let drag;
     let clipRect, rect, rectRed;
     let overlay = {};
-    let properties
+    let properties;
+    let cropperWidth,cropperHeight;
 
     function CropImage(canvas, draggable = false, apply = false, cancel = false, params) {
         this.canvas = canvas;
@@ -62,7 +63,14 @@ export default (function () {
             new CanvasHistory(this.canvas, croppedImage);
             return CropImage
         }
-
+        if(canvas.width <= properties.width || canvas.height <= properties.height){
+            cropperWidth =  canvas.width - 50;
+            cropperHeight = canvas.height - 50;
+        }
+        else{
+            cropperWidth =  properties.width;
+            cropperHeight = properties.height;
+        }
         this.bindEvents();
         this.canvas.selectable = false;
         this.canvas.renderAll();
@@ -82,8 +90,8 @@ export default (function () {
                 rectRed = new fabric.Rect({
                     left: (oImg1.width - properties.width) / 2,
                     top: (oImg1.height - properties.height) / 2,
-                    width: properties.width,
-                    height: properties.height,
+                    width: cropperWidth,
+                    height: cropperHeight,
                     fill: '',
                     imageWidth: oImg1.width,
                     imageHeight: oImg1.height,
@@ -113,10 +121,10 @@ export default (function () {
                     }
                 });
                 clipRect = new fabric.Rect({
-                    left: -(properties.width / 2),
-                    top: -(properties.height / 2),
-                    width: properties.width,
-                    height: properties.height,
+                    left: -(cropperWidth / 2),
+                    top: -(cropperHeight / 2),
+                    width: cropperWidth,
+                    height: cropperHeight,
                     fill: '',
                     selectable: false,
                 });