Rotation now working with img and resizing. export missing.

javascript/src/Plugins/qfq.fabric.js

@@ -284,7 +284,8 @@ $(function (n) {
         this.canvas = this.__canvas = new fabric.Canvas(canvas, {
             isDrawingMode: false,
             stateful: true,
-            enableRetinaScaling: true
+            enableRetinaScaling: true,
+            backgroundColor: "#1c222b"
         });
 
         fabric.Image.fromURL(this.backgroundImage, function(oImg) {
@@ -297,7 +298,6 @@ $(function (n) {
                 evented: false,
                 lockMovementY: true,
                 lockMovementX: true,
-                lockRotation: true,
                 lockScalingX: true,
                 lockScalingY : true,
                 lockUniScaling: true,
@@ -309,7 +309,7 @@ $(function (n) {
             that.canvas.centerObject(oImg);
             that.canvas.renderAll();
             this.imageToEdit = oImg;
-        })
+        });
     };
 
     n.Fabric.prototype.prepareStaticCanvas = function(width, height) {
@@ -747,21 +747,42 @@ $(function (n) {
                 this.delete();
                 break;
             case "rotateRight":
-                this.rotateCanvas(90);
+                this.rotateImage(90);
                 break;
             default:
                 console.error("unrecognized mode");
         }
     };
 
-    n.Fabric.prototype.rotateCanvas = function(degrees) {
-        var newHeight = this.canvas.getWidth();
-        var newWidth = this.canvas.getHeight();
+    n.Fabric.prototype.rotateImage = function(degrees) {
+        var img = this.canvas.item(0);
+        console.log("img width before Rotate: " + img.width);
         this.setRotation(this.rotation + degrees);
-        this.canvas.setHeight(newHeight);
-        this.canvas.setWidth(newWidth);
-        this.canvas.backgroundImage.rotate(this.rotation);
-        this.canvas.resizeCanvas();
+        console.log("img width: " + img.width);
+        img.rotate(this.rotation);
+        this.canvas.renderAll();
+        if (this.rotation == 90 || this.rotation == 270) {
+            if (img.width > this.canvas.height) {
+                img.height = this.canvas.height * img.height / img.width;
+                img.width = this.canvas.height;
+            }
+            if (img.height > this.canvas.width) {
+                img.width = this.canvas.width * img.width / img.height;
+                img.height = this.canvas.width;
+            }
+        } else {
+            if (img.width < this.canvas.width) {
+                img.height = this.canvas.width * img.width / img.height;
+                img.width = this.canvas.width;
+            }
+            if (img.height < this.canvas.height) {
+                img.width = this.canvas.height * img.height / img.width;
+                img.height = this.canvas.height;
+            }
+        }
+        this.canvas.centerObject(img);
+        console.log("img width after Resize: " + img.width);
+        this.canvas.renderAll();
     };
 
     n.Fabric.prototype.setRotation = function(degrees) {

mockup/imageEditorFabric.html

@@ -38,7 +38,11 @@
 
     <div class="row">
         <div class="col-md-4">
-            <div class="fabric" data-buttons="mockData/fabric.editor.buttons.json" data-edit-image="true" data-background-image="mockData/Scan2a.jpeg"></div>
+            <div class="fabric"
+                 data-buttons="mockData/fabric.editor.buttons.json"
+                 data-edit-image="true"
+                 data-background-image="mockData/Scan2a.jpeg">
+            </div>
         </div>
     </div>
 </div>