fixed error with resizing and empty fabric json not displaying an image

javascript/src/Plugins/qfq.fabric.js

@@ -327,14 +327,15 @@ $(function (n) {
         console.log("prepareStaticCanvas");
         this.generateStaticCanvas(width, height);
         if (this.fabricJSON) {
-            console.log("getFabric");
             this.canvas.loadFromJSON(this.fabricJSON);
+        } else {
+            this.setBackground();
         }
-        this.resizeCanvas();
-
+        this.canvas.renderAll();
         var that = this;
 
         setTimeout(function () {
+            that.resizeCanvas();
             that.canvas.renderAll();
         }, 1000);
     };
@@ -348,6 +349,7 @@ $(function (n) {
         this.parentElement.append(canvas);
         this.canvas = this.__canvas = new fabric.StaticCanvas(canvas);
         this.parentElement.on("click", function(e) { that.toggleObjects(); });
+        $(window).resize(function() { that.resizeCanvas(); });
     };
 
     n.Fabric.prototype.getMeta = function(url, callback) {
@@ -431,11 +433,17 @@ $(function (n) {
 
     n.Fabric.prototype.resizeCanvas = function () {
         console.log("resize canvas started");
+        var source = false;
         var backgroundSizing = false;
         var oldWidth = this.canvas.getWidth();
         var backgroundImageWidth = 0;
         if (this.canvas.backgroundImage) {
-            backgroundImageWidth = this.canvas.backgroundImage.width || 0;
+            source = this.canvas;
+        } else {
+            source = this.fabricJSON;
+        }
+        if (source) {
+            backgroundImageWidth = source.backgroundImage.width;
         }
         if (oldWidth !== backgroundImageWidth && backgroundImageWidth !== 0) {
             oldWidth = backgroundImageWidth;
@@ -446,13 +454,17 @@ $(function (n) {
             var scaleMultiplier = newWidth / oldWidth;
             var oldHeight;
             if (backgroundSizing) {
-                oldHeight = this.canvas.backgroundImage.height || 0;
+                if (source) {
+                    oldHeight = source.backgroundImage.height;
+                }
             } else {
                 oldHeight = this.canvas.getHeight();
             }
-            this.canvas.setWidth(this.parentElement.innerWidth());
+            this.canvas.setWidth(newWidth);
             this.canvas.setHeight(oldHeight * scaleMultiplier);
-            var objects = this.canvas.getObjects();
+
+
+            var objects = source.getObjects();
             for (var i in objects) {
                 objects[i].scaleX = objects[i].scaleX * scaleMultiplier;
                 objects[i].scaleY = objects[i].scaleY * scaleMultiplier;