From 302ec3534c1c924c57af07f532d2542bac7bc05c Mon Sep 17 00:00:00 2001
From: Lilit <lilit.simonyan.1998@gmail.com>
Date: Thu, 19 Dec 2019 17:06:57 +0400
Subject: [PATCH] add setBackgroundImage and saveImage features

---
 README.md              |  29 ++++--
 package.json           |   2 +-
 src/Editor.vue         | 223 +++++++++++++++++++++++++----------------
 src/assets/js/arrow.js |  38 +++----
 src/assets/js/shape.js | 118 +++++++++++-----------
 src/assets/js/text.js  |   2 +-
 6 files changed, 235 insertions(+), 177 deletions(-)

diff --git a/README.md b/README.md
index 7f14d0f..ac9ed44 100644
--- a/README.md
+++ b/README.md
@@ -27,19 +27,13 @@ Then you'll be able to use Editor component.
 
 You must give your editor component ```ref```,which will help you to call the functions to set editor mode,clean objects or undo/redo your changes.
 ```vue
-<Editor :setBackgroundImage="url" :canvasWidth="canvasWidth" :canvasHeight="canvasHeight" ref="editor"/>
+<Editor :canvasWidth="canvasWidth" :canvasHeight="canvasHeight" ref="editor"/>
 
 mounted() {
     $this.$refs.editor.set(this.editor.mode,this.editor.options);
-},
-data(){
-    return:{
-        url:"example.png"   
-     }
 }
 
 ```
-`setBackgroundImage` prop will set editor background image
 
 `canvasWidth` prop will set editor width
 
@@ -159,16 +153,29 @@ or you can customize your editor's free drawing mode styles by overwriting defau
  this.$refs.editor.set('freeDrawing',customizeFreeDrawing)
 ```
 
-## Function changeColor(`colorHex`)
-##### `changeColor(`colorHex`)` to set color for all objects
-```javascript
- this.$refs.editor.changeColor('#228B22')
+## Function setBackgroundImage(imageUrl)
+##### `setBackgroundImage(imageUrl)` to set editor background image
+```vue
+data(){
+    return{
+        imageUrl:"example.png"
+     }
+},
+methods:{
+    this.$refs.editor.setBackgroundImage(this.imageUrl);
+}
 ```
+
 ## Function uploadImage(e)
 ##### `uploadImage(e)` to set background of canvas
 ```javascript
  this.$refs.editor.uploadImage(e)
 ```
+## Function saveImage()
+##### `saveImage()` to save your image,which returns image in base64 format.
+```javascript
+ this.$refs.editor.saveImage()
+```
 
 ## Function clear()
 ##### `clear()` function delete editor's all objects
diff --git a/package.json b/package.json
index 9dfb652..65754cc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-image-markup",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "vue-image-markup will provide you to edit uploaded image easily and save it.",
   "main": "src/Editor.vue",
   "repository": {
diff --git a/src/Editor.vue b/src/Editor.vue
index 9d17b59..611f451 100644
--- a/src/Editor.vue
+++ b/src/Editor.vue
@@ -1,4 +1,3 @@
-<script src="assets/js/text.js"></script>
 <template>
     <div class="custom-editor">
         <canvas id="c"></canvas>
@@ -6,25 +5,26 @@
 </template>
 
 <script>
-    import { fabric } from 'fabric';
+    import {fabric} from 'fabric';
     import Shape from './assets/js/shape';
     import Text from './assets/js/text';
     import Arrow from './assets/js/arrow';
+
     export default {
         name: 'Editor',
-        props: ['setBackgroundImage','canvasWidth','canvasHeight'],
+        props: ['canvasWidth', 'canvasHeight'],
         data() {
-            return{
+            return {
                 canvas: null,
-                pointerX:null,
-                pointerY:null,
+                pointerX: null,
+                pointerY: null,
                 createCircle: false,
                 createRect: false,
                 createArrow: false,
-                createText:false,
-                circle:null,
-                currentActiveMethod:null,
-                currentActiveTool:null,
+                createText: false,
+                circle: null,
+                currentActiveMethod: null,
+                currentActiveTool: null,
                 objects: [],
                 width: null,
                 height: null,
@@ -35,22 +35,74 @@
             }
 
         },
-        mounted(){
+        mounted() {
             this.canvas = new fabric.Canvas('c');
-            this.canvas.setDimensions({width:this.canvasWidth, height:this.canvasHeight});
-            if(this.setBackgroundImage){
-                this.setBackground(this.setBackgroundImage)
-            }
+            this.canvas.setDimensions({width: this.canvasWidth, height: this.canvasHeight});
         },
-        methods:{
-            clear(){
-              this.canvas.clear();
+        methods: {
+            setBackgroundImage(imageUrl){
+                let img = new Image();
+                this.toDataUrl(imageUrl, (dataUri) => {
+                    img.src = dataUri;
+                    let inst = this;
+                    if (inst.canvas.width <= img.width || inst.canvas.height <= img.height) {
+                        var canvasAspect = inst.canvas.width / inst.canvas.height;
+                        var imgAspect = img.width / img.height;
+                        if (canvasAspect >= imgAspect) {
+                            var scaleFactor = inst.canvas.width / img.width;
+                            var left = 0;
+                            var top = -((img.height * scaleFactor) - inst.canvas.height) / 2;
+
+                        } else {
+                            var scaleFactor = inst.canvas.height / img.height;
+                            var top = 0;
+                            var left = -((img.width * scaleFactor) - inst.canvas.width) / 2;
+                        }
+                        img.width = inst.canvas.width;
+                        img.height = inst.canvas.height;
+
+                        inst.canvas.setBackgroundImage(dataUri, inst.canvas.renderAll.bind(inst.canvas), {
+                            top: top,
+                            left: left,
+                            originX: 'left',
+                            originY: 'top',
+                            scaleX: scaleFactor,
+                            scaleY: scaleFactor
+                        });
+                        inst.canvas.renderAll()
+                    }else{
+                        let center = inst.canvas.getCenter();
+                        inst.canvas.setBackgroundImage(dataUri, inst.canvas.renderAll.bind(inst.canvas), {
+                            top: center.top,
+                            left: center.left,
+                            originX: 'center',
+                            originY: 'center'
+                        });
+                        inst.canvas.renderAll()
+                    }
+                });
+            },
+            toDataUrl(url, callback) {
+                var xhr = new XMLHttpRequest();
+                xhr.onload = function () {
+                    var reader = new FileReader();
+                    reader.onloadend = () => {
+                        callback(reader.result);
+                    }
+                    reader.readAsDataURL(xhr.response);
+                };
+                xhr.open('GET', url);
+                xhr.responseType = 'blob';
+                xhr.send();
             },
-            changeColor(colorProperty){
+            clear() {
+                this.canvas.clear();
+            },
+            changeColor(colorProperty) {
                 this.color = colorProperty;
                 this.set(this.currentActiveTool)
             },
-            set(type,params){
+            set(type, params) {
                 switch (type) {
                     case "text":
                         this.currentActiveTool = type;
@@ -59,10 +111,7 @@
                             fontFamily: (params && params.fontFamily) ? params.fontFamily : 'Arial',
                             fontSize: (params && params.fontSize) ? params.fontSize : this.fontSize,
                             placeholder: (params && params.placeholder) ? params.placeholder : 'Add Text',
-
                         };
-                            // hasBorders:(params && params.hasBorders) ? params.hasBorders :false,
-                            // hasControls:(params && params.hasControls) ? params.hasControls :false,
                         this.addText(this.params);
                         break;
 
@@ -79,8 +128,7 @@
                             strokeUniform: (params && params.strokeUniform) ? params.strokeUniform : true,
                             noScaleCache: (params && params.noScaleCache) ? params.noScaleCache : false,
                         };
-
-                        this.customCircle(type,this.params);
+                        this.customCircle(type, this.params);
                         break;
                     case "rect":
                         this.currentActiveTool = type;
@@ -92,12 +140,12 @@
                             width: (params && params.width) ? params.width : null,
                             height: (params && params.height) ? params.height : null,
                             top: (params && params.top) ? params.top : 0,
-                            left: (params && params.left) ? params.left :0,
+                            left: (params && params.left) ? params.left : 0,
                             opacity: (params && params.opacity) ? params.opacity : 1,
                             strokeUniform: (params && params.strokeUniform) ? params.strokeUniform : true,
                             noScaleCache: (params && params.noScaleCache) ? params.noScaleCache : false,
                         };
-                        this.customRect(type,this.params);
+                        this.customRect(type, this.params);
                         break;
 
                     case 'selectMode':
@@ -106,7 +154,6 @@
                         break;
 
                     case 'arrow':
-
                         this.currentActiveTool = type;
                         this.params = {
                             fill: (params && params.fill) ? params.fill : 'transparent',
@@ -115,7 +162,6 @@
                             strokeUniform: (params && params.strokeUniform) ? params.strokeUniform : true,
                             noScaleCache: (params && params.noScaleCache) ? params.noScaleCache : false,
                         };
-
                         this.drawArrow(this.params);
                         break;
                     case 'freeDrawing':
@@ -128,19 +174,12 @@
                         this.drawing(this.params);
                         break;
                     default:
-
                 }
             },
-            saveImage(){
-                return this.canvas.toDataURL();
-            },
-            setBackground(backgroundImage){
-                    let inst = this;
-                    this.canvas.setBackgroundColor({ source: backgroundImage, repeat: 'no-repeat' }, function () {
-                        inst.canvas.renderAll();
-                    })
+            saveImage() {
+                return this.canvas.toDataURL('image/jpeg', 1);
             },
-            uploadImage(e){
+            uploadImage(e) {
                 let inst = this;
                 let reader = new FileReader();
                 reader.onload = function (event) {
@@ -148,103 +187,112 @@
                     imgObj.src = event.target.result;
                     imgObj.onload = function () {
                         let image = new fabric.Image(imgObj);
+                        if (inst.canvas.width <= image.width || inst.canvas.height <= image.height) {
+                            var canvasAspect = inst.canvas.width / inst.canvas.height;
+                            var imgAspect = image.width / image.height;
+                            if (canvasAspect >= imgAspect) {
+                                var scaleFactor = inst.canvas.width / image.width;
+                                var left = 0;
+                                var top = -((image.height * scaleFactor) - inst.canvas.height) / 2;
 
-                        if(image.width > inst.canvas.width && image.height > inst.canvas ){
+                            } else {
+                                var scaleFactor = inst.canvas.height / image.height;
+                                var top = 0;
+                                var left = -((image.width * scaleFactor) - inst.canvas.width) / 2;
+                            }
                             inst.canvas.setBackgroundImage(image, inst.canvas.renderAll.bind(inst.canvas), {
-                                top: 0,
-                                left: 0,
+                                top: top,
+                                left: left,
                                 originX: 'left',
                                 originY: 'top',
-                                scaleX: inst.canvas.width / image.width,
-                                scaleY: inst.canvas.height / image.height
+                                scaleX: scaleFactor,
+                                scaleY: scaleFactor
                             });
-                        }
-                        else{
+                            inst.canvas.renderAll();
+                        }else{
+                            let center = inst.canvas.getCenter();
                             inst.canvas.setBackgroundImage(image, inst.canvas.renderAll.bind(inst.canvas), {
-                                top: 0,
-                                left: 0,
-                                originX: 'left',
-                                originY: 'top'
+                                top: center.top,
+                                left: center.left,
+                                originX: 'center',
+                                originY: 'center'
                             });
+                            inst.canvas.renderAll();
                         }
-                        inst.canvas.renderAll();
                     }
                 }
                 reader.readAsDataURL(e.target.files[0]);
-
             },
-            customCircle(type,params){
+            customCircle(type, params) {
                 this.createArrow = false;
-                new Arrow(this.canvas,false)
+                new Arrow(this.canvas, false)
                 this.currentActiveMethod = this.customCircle;
                 this.createRect = false;
                 this.canvas.isDrawingMode = false;
-                if(!params.disableCircleEditing){
+                if (!params.disableCircleEditing) {
                     this.createCircle = true;
-                    new Shape(this.canvas,this.createCircle,type,params);
-                }
-                else{
+                    new Shape(this.canvas, this.createCircle, type, params);
+                } else {
                     this.drawCircle(params);
                 }
             },
-            customRect(type,params){
+            customRect(type, params) {
                 this.createArrow = false;
-                new Arrow(this.canvas,false)
+                new Arrow(this.canvas, false)
                 this.currentActiveMethod = this.customRect;
                 this.canvas.isDrawingMode = false;
                 this.createCircle = false;
-                if(params.width && params.height){
+                if (params.width && params.height) {
                     this.drawRect(params);
-                }
-                else{
+                } else {
                     this.createRect = true;
-                    new Shape(this.canvas,this.createRect,type,params);
+                    new Shape(this.canvas, this.createRect, type, params);
                 }
             },
-            drawArrow(params){
+            drawArrow(params) {
                 this.currentActiveMethod = this.drawArrow;
                 this.drag();
                 this.createArrow = true;
-                new Arrow(this.canvas,this.createArrow,params);
+                new Arrow(this.canvas, this.createArrow, params);
             },
-            drag(){
+            drag() {
                 this.currentActiveMethod = this.drag;
                 this.canvas.isDrawingMode = false;
-                if(this.createArrow){
+                if (this.createArrow) {
                     this.createArrow = false;
-                    new Arrow(this.canvas,false);
+                    new Arrow(this.canvas, false);
                 }
-                if(this.createRect || this.createCircle){
+                if (this.createRect || this.createCircle) {
                     this.createRect = false;
                     this.createCircle = false;
                     new Shape(this.canvas, false);
                 }
-                if(this.createText){
+                if (this.createText) {
                     this.createText = false;
-                    new Text(this.canvas,false);
+                    new Text(this.canvas, false);
                 }
             },
-            addText(params){
+            addText(params) {
                 this.currentActiveMethod = this.addText;
                 this.drag();
                 this.createText = true;
-                new Text(this.canvas,this.createText,params);
+                new Text(this.canvas, this.createText, params);
             },
-            undo(){
-                if(this.canvas._objects.length>0){
+            undo() {
+                if (this.canvas._objects.length > 0) {
                     this.objects.push(this.canvas._objects.pop());
                     this.canvas.renderAll();
                 }
-                if(this.canvas.getActiveObject()){
+                if (this.canvas.getActiveObject()) {
                     this.canvas.discardActiveObject().renderAll()
                 }
             },
-            redo(){
-                if(this.objects.length>0){
+            redo() {
+                if (this.objects.length > 0) {
                     this.canvas.add(this.objects.pop());
                 }
             },
-            drawing(params){
+            drawing(params) {
 
                 this.currentActiveMethod = this.drawing;
                 this.drag();
@@ -254,10 +302,10 @@
             },
 
 
-            drawRect(params){
+            drawRect(params) {
                 this.drag();
                 this.canvas.discardActiveObject();
-                if(!this.canvas.getActiveObject()){
+                if (!this.canvas.getActiveObject()) {
                     this.rectangle = new fabric.Rect({
                         width: params.width,
                         height: params.height,
@@ -273,17 +321,17 @@
                     this.canvas.add(this.rectangle);
                 }
             },
-            drawCircle(params){
+            drawCircle(params) {
                 this.drag();
                 this.canvas.discardActiveObject();
                 this.circle = new fabric.Circle({
-                    left:params.left,
-                    top:params.top,
+                    left: params.left,
+                    top: params.top,
                     radius: params.radius,
                     strokeWidth: params.strokeWidth,
                     stroke: params.stroke,
                     fill: params.fill,
-                    borderColor:'yellow',
+                    borderColor: 'yellow',
                     // strokeUniform: params.strokeUniform,
                     noScaleCache: params.noScaleCache
                 });
@@ -295,3 +343,6 @@
 
     }
 </script>
+<style>
+
+</style>
diff --git a/src/assets/js/arrow.js b/src/assets/js/arrow.js
index 1916c20..39c39b9 100644
--- a/src/assets/js/arrow.js
+++ b/src/assets/js/arrow.js
@@ -62,10 +62,10 @@ export default (function () {
 
         if(color && color !== params.stroke){
             color = params.stroke;
-            // drag = true;
             new Arrow(canvas,draggable,params)
             return Arrow;
         }
+
         properties = params;
         if(properties){
             fillArrow = params.fill;
@@ -91,26 +91,26 @@ export default (function () {
             inst.canvas.renderAll()
         };
         inst.selectable = true;
-        
-            inst.canvas.off('mouse:down');
-            inst.canvas.on('mouse:down', function (o) {
-                inst.onMouseDown(o);
-            });
-            inst.canvas.on('mouse:move', function (o) {
-                inst.onMouseMove(o);
-            });
-            inst.canvas.on('mouse:up', function (o) {
-                inst.onMouseUp(o);
-                
-            });
-            inst.canvas.on('object:moving', function () {
-                inst.disable();
-            });
-            
+
+        inst.canvas.off('mouse:down');
+        inst.canvas.on('mouse:down', function (o) {
+            inst.onMouseDown(o);
+        });
+        inst.canvas.on('mouse:move', function (o) {
+            inst.onMouseMove(o);
+        });
+        inst.canvas.on('mouse:up', function (o) {
+            inst.onMouseUp(o);
+
+        });
+        inst.canvas.on('object:moving', function () {
+            inst.disable();
+        });
+
 
     };
     Arrow.prototype.onMouseUp = function () {
-        
+
         let inst = this;
         if (!inst.isEnable()) {
             return;
@@ -127,7 +127,7 @@ export default (function () {
             inst.canvas.renderAll();
         }
         inst.disable();
-    
+
 
     };
     Arrow.prototype.onMouseMove = function (o) {
diff --git a/src/assets/js/shape.js b/src/assets/js/shape.js
index 3e99686..8675ba1 100644
--- a/src/assets/js/shape.js
+++ b/src/assets/js/shape.js
@@ -54,20 +54,20 @@ export default (function () {
             inst.canvas.renderAll()
         };
         inst.selectable = true;
-                inst.canvas.off('mouse:down');
-                
-                inst.canvas.on('mouse:down', function (o) {
-                    inst.onMouseDown(o);
-                });
-                inst.canvas.on('mouse:move', function (o) {
-                    inst.onMouseMove(o);
-                });
-                inst.canvas.on('mouse:up', function (o) {
-                    inst.onMouseUp(o);
-                });
-                inst.canvas.on('object:moving', function () {
-                    inst.disable();
-                });
+        inst.canvas.off('mouse:down');
+
+        inst.canvas.on('mouse:down', function (o) {
+            inst.onMouseDown(o);
+        });
+        inst.canvas.on('mouse:move', function (o) {
+            inst.onMouseMove(o);
+        });
+        inst.canvas.on('mouse:up', function (o) {
+            inst.onMouseUp(o);
+        });
+        inst.canvas.on('object:moving', function () {
+            inst.disable();
+        });
 
 
 
@@ -149,10 +149,10 @@ export default (function () {
     };
 
     Shape.prototype.onMouseDown = function (o) {
-        
+
         let inst = this;
         if(!drag){
-            
+
             if( inst.canvas.getActiveObject()){
                 inst.canvas.getActiveObject().hasControls = true;
                 inst.canvas.getActiveObject().hasBorders = true;
@@ -164,50 +164,50 @@ export default (function () {
             inst.disable();
             return;
         }
-            inst.enable();
-            
-            if(inst.canvas.getActiveObject()){
-                inst.canvas.getActiveObject().hasControls = false;
-                inst.canvas.getActiveObject().hasBorders = false;
-                inst.canvas.getActiveObject().lockMovementX = true;
-                inst.canvas.getActiveObject().lockMovementY = true;
-                inst.canvas.getActiveObject().lockUniScaling = true;
-                inst.canvas.renderAll();
-            }
-            let pointer = inst.canvas.getPointer(o.e);
-            this.origX = pointer.x;
-            this.origY = pointer.y;
-            if(shape === "rect"){
-                let rect = new fabric.Rect({
-                    left: this.origX,
-                    top: this.origY,
-                    originX: 'left',
-                    originY: 'top',
-                    width: pointer.x - this.origX,
-                    height: pointer.y - this.origY,
-                    angle: angle,
-                    fill: fillCircle,
-                    transparentCorners: false,
-                    stroke: color,
-                    strokeWidth: lineWidth
-                });
-                inst.canvas.add(rect).setActiveObject(rect);
-            }
-            if(shape === "circle"){
-                let circle = new fabric.Ellipse({
-                    top: this.origY,
-                    left: this.origX,
-                    rx: 0,
-                    ry: 0,
-                    transparentCorners: false,
-                    hasBorders: true,
-                    hasControls: true,
-                });
-                inst.canvas.add(circle).setActiveObject(circle);
-            }
-        
+        inst.enable();
+
+        if(inst.canvas.getActiveObject()){
+            inst.canvas.getActiveObject().hasControls = false;
+            inst.canvas.getActiveObject().hasBorders = false;
+            inst.canvas.getActiveObject().lockMovementX = true;
+            inst.canvas.getActiveObject().lockMovementY = true;
+            inst.canvas.getActiveObject().lockUniScaling = true;
+            inst.canvas.renderAll();
+        }
+        let pointer = inst.canvas.getPointer(o.e);
+        this.origX = pointer.x;
+        this.origY = pointer.y;
+        if(shape === "rect"){
+            let rect = new fabric.Rect({
+                left: this.origX,
+                top: this.origY,
+                originX: 'left',
+                originY: 'top',
+                width: pointer.x - this.origX,
+                height: pointer.y - this.origY,
+                angle: angle,
+                fill: fillCircle,
+                transparentCorners: false,
+                stroke: color,
+                strokeWidth: lineWidth
+            });
+            inst.canvas.add(rect).setActiveObject(rect);
+        }
+        if(shape === "circle"){
+            let circle = new fabric.Ellipse({
+                top: this.origY,
+                left: this.origX,
+                rx: 0,
+                ry: 0,
+                transparentCorners: false,
+                hasBorders: true,
+                hasControls: true,
+            });
+            inst.canvas.add(circle).setActiveObject(circle);
+        }
+
+
 
-       
     };
 
     Shape.prototype.isEnable = function () {
diff --git a/src/assets/js/text.js b/src/assets/js/text.js
index d980b1d..b2e12dd 100644
--- a/src/assets/js/text.js
+++ b/src/assets/js/text.js
@@ -25,7 +25,7 @@ export default (function () {
     Text.prototype.bindEvents = function () {
         let inst = this;
         inst.selectable = true;
-        inst.canvas.off("mouse:down")
+        // inst.canvas.off("mouse:down")
         inst.canvas.on("mouse:down", function (o) {
             inst.onMouseDown(o);
         });