fix background size issue

lionix-team · Feb 14, 2020 · 31aa68e · 31aa68e
1 parent 65f30b6
commit 31aa68e
Showing 1 changed file with 22 additions and 29 deletions.
diff --git a/src/Editor.vue b/src/Editor.vue
@@ -42,35 +42,30 @@
             this.canvas = new fabric.Canvas('c');
             this.canvas.setDimensions({width: this.canvasWidth, height: this.canvasHeight});  
             this.canvas.backgroundColor = "#fff";
-            new CanvasHistory(this.canvas)       
+            new CanvasHistory(this.canvas);   
         },
         methods: {  
             setBackgroundImage(imageUrl){
                     let img = new Image();
                     this.toDataUrl(imageUrl, (dataUri) => {
                         img.src = dataUri;
                         let inst = this;
+                        img.onload = function () {
                         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;
-
+                            let canvasAspect = inst.canvas.width / inst.canvas.height;
+                            let imgAspect = img.width / img.height;
+                             if (canvasAspect >= imgAspect) {
+                                let scaleFactor = inst.canvas.height / img.height
+                                let top = 0;
+                                let left = -((img.width * scaleFactor) - inst.canvas.width) / 2;
                             } else {
-                                var scaleFactor = inst.canvas.height / img.height;
-                                var top = 0;
-                                var left = -((img.width * scaleFactor) - inst.canvas.width) / 2;
+                                let scaleFactor = inst.canvas.width / img.width;
+                                let left = 0;
+                                var top = -((img.height * scaleFactor) - inst.canvas.height) / 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
                             });
@@ -85,6 +80,7 @@
                             });
                             inst.canvas.renderAll()
                         }
+                        }
                     });             
             },
             toDataUrl(url, callback) {
@@ -216,25 +212,22 @@
                     let imgObj = new Image();
                     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;
+                        let image = new fabric.Image(imgObj);                      
+                        if (inst.canvas.width <= image.width || inst.canvas.height <= image.height) {                          
+                            let canvasAspect = inst.canvas.width / inst.canvas.height;
+                            let 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;
-
+                                let scaleFactor = inst.canvas.height / image.height
+                                let top = 0;
+                                let left = -((image.width * scaleFactor) - inst.canvas.width) / 2;
                             } else {
-                                var scaleFactor = inst.canvas.height / image.height;
-                                var top = 0;
-                                var left = -((image.width * scaleFactor) - inst.canvas.width) / 2;
+                                let scaleFactor = inst.canvas.width / image.width;
+                                let left = 0;
+                                let top = -((image.height * scaleFactor) - inst.canvas.height) / 2;                             
                             }
                             inst.canvas.setBackgroundImage(image, inst.canvas.renderAll.bind(inst.canvas), {
                                 top: top,
                                 left: left,
-                                originX: 'left',
-                                originY: 'top',
                                 scaleX: scaleFactor,
                                 scaleY: scaleFactor
                             });