changed from <img> fabric element to data-background-image for annotate

javascript/src/Plugins/qfq.fabric.js

@@ -34,10 +34,10 @@ $(function (n) {
         this.borderSize = 5;
         this.textSize = 16;
         this.panning = false;
+        this.userText = "";
         this.moveMode = false;
         this.canvasOriginalHeight = 0;
         this.isZoomMode = false;
-        this.userText = "";
         this.drawRectangleMode = false;
         this.drawTextBoxMode = false;
         this.emojiMode = false;
@@ -245,8 +245,6 @@ $(function (n) {
     };
 
     n.Fabric.prototype.initialize = function($fabricElement) {
-        var jsonButtons = $fabricElement.data('buttons');
-        var jsonEmojis = $fabricElement.data('emojis');
         var inputField = $fabricElement.data('control-name');
         var imageOutput = $fabricElement.data('image-output');
         var viewOnly = $fabricElement.data('view-only') || false;
@@ -267,18 +265,48 @@ $(function (n) {
             this.modeSettings.initialize(this, jsonButtons);
         } else {
             this.outputField = $("#" + inputField);
-            this.modeSettings.initialize(this, jsonButtons);
-            this.emojiHandler.initialize(this, jsonEmojis);
-            this.generateCanvas();
-            if (this.outputField.val()) {
-                this.canvas.loadFromJSON(this.outputField.val());
-            }
-            this.setBackground();
-            this.setBrush();
-            setTimeout(function () {
+            this.generateControls();
+            this.getMeta(this.backgroundImage, function(width, height) { that.prepareCanvas(width, height);});
+        }
+    };
+
+    n.Fabric.prototype.generateControls = function () {
+        var jsonButtons = this.parentElement.data('buttons');
+        var jsonEmojis = this.parentElement.data('emojis');
+        var emojiContainer = $('<div>', {
+            style: 'display: none;'
+        });
+        var textContainer = $('<div>', {
+            style: 'display: none;'
+        });
+        var textArea = $('<textarea>', {
+            class: 'fabric-text',
+            placeholder: 'Write a text and then draw a textbox over the image'
+        });
+        this.modeSettings.initialize(this, jsonButtons);
+        this.emojiHandler.initialize(this, jsonEmojis);
+        textContainer.append(textArea);
+        this.parentElement.append(this.controlElement);
+        this.parentElement.append(emojiContainer);
+        this.parentElement.append(textContainer);
+        this.emojiContainer = emojiContainer;
+    };
+
+    n.Fabric.prototype.prepareCanvas = function (width, height) {
+        var that = this;
+        this.generateCanvas(width, height);
+        if (this.outputField.val()) {
+            this.canvas.loadFromJSON(this.outputField.val(), function() {
+                that.setBackground();
+                that.setBrush();
                 that.canvas.renderAll();
                 that.userChangePossible = true;
-            }, 1000);
+            });
+        } else {
+            that.setBackground();
+            that.setBrush();
+            that.canvas.renderAll();
+            that.userChangePossible = true;
         }
     };
 
@@ -367,30 +395,14 @@ $(function (n) {
         this.canvas.renderAll();
     };
 
-    n.Fabric.prototype.generateCanvas = function() {
+    n.Fabric.prototype.generateCanvas = function(width, height) {
         var canvas = document.createElement('canvas');
         canvas.setAttribute('draggable', true);
-        var emojiContainer = $('<div>', {
-            style: 'display: none;'
-        });
-        var textContainer = $('<div>', {
-            style: 'display: none;'
-        });
-        var textArea = $('<textarea>', {
-            class: 'fabric-text',
-            placeholder: 'Write a text and then draw a textbox over the image'
-        });
         var that = this;
         canvas.id = "c1";
-        var $img = $(".qfq-fabric-image");
-        var ratio = $img.height() / $img.width();
+        var ratio = height / width;
         canvas.width = this.parentElement.innerWidth();
         canvas.height = canvas.width * ratio;
-        textContainer.append(textArea);
-        this.parentElement.append(this.controlElement);
-        this.parentElement.append(emojiContainer);
-        this.parentElement.append(textContainer);
-        this.emojiContainer = emojiContainer;
         this.parentElement.append(canvas);
         this.canvas = this.__canvas = new fabric.Canvas(canvas, {
             isDrawingMode: true,
@@ -427,7 +439,7 @@ $(function (n) {
     };
 
     n.Fabric.prototype.defaultMouseInEvent = function(e) {
-      this.mouseInsideCanvas = true;
+        this.mouseInsideCanvas = true;
     };
 
     n.Fabric.prototype.resizeCanvas = function () {
@@ -505,20 +517,24 @@ $(function (n) {
                  that.canvas.setBackgroundImage(img, that.canvas.renderAll.bind(that.canvas));
              });
         } else {
+            console.log("mob new");
             var $image = document.getElementsByClassName("qfq-fabric-image")[0];
-            var img = new fabric.Image($image, {
-                width: this.canvas.width,
-                height: this.canvas.height,
-                originX: 'left',
-                originY: 'top',
-                lockUniScaling: true,
-                centeredScaling: true,
-                centeredRotation: true
-            });
-            img.rotate(this.rotation);
-            img.onload = function() { that.canvas.renderAll(); };
-            this.canvas.setBackgroundImage(img, this.canvas.renderAll.bind(this.canvas));
-            this.canvas.renderAll();
+            $image.onload = function() {
+                console.log("Image loaded");
+                var img = new fabric.Image(this, {
+                    width: that.canvas.width,
+                    height: that.canvas.height,
+                    originX: 'left',
+                    originY: 'top',
+                    lockUniScaling: true,
+                    centeredScaling: true,
+                    centeredRotation: true
+                });
+                img.rotate(that.rotation);
+                that.canvas.setBackgroundImage(img, that.canvas.renderAll.bind(that.canvas));
+                that.canvas.renderAll();
+            };
+
         }
     };