more or less working rotation and export

javascript/src/Plugins/qfq.fabric.js

@@ -36,6 +36,7 @@ $(function (n) {
         this.textSize = 16;
         this.panning = false;
         this.moveMode = false;
+        this.canvasOriginalHeight = 0;
         this.isZoomMode = false;
         this.userText = "";
         this.drawRectangleMode = false;
@@ -324,7 +325,6 @@ $(function (n) {
         var that = this;
 
         setTimeout(function () {
-            that.resizeCanvas();
             that.canvas.renderAll();
         }, 1000);
     };
@@ -749,19 +749,61 @@ $(function (n) {
             case "rotateRight":
                 this.rotateImage(90);
                 break;
+            case "exportImage":
+                this.prepareForExport();
+                break;
             default:
                 console.error("unrecognized mode");
         }
     };
 
+    n.Fabric.prototype.prepareForExport = function() {
+        var img = this.canvas.item(0);
+        var oldHeight = img.height;
+        var oldWidth = img.width;
+        var rotated = false;
+        img.width = img.width * 2;
+        img.height = img.height * 2;
+        if (this.rotation === 90 || this.rotation === 270) {
+            // width is now height and viceversa
+            rotated = true;
+            this.canvas.setHeight(img.width);
+            this.canvas.setWidth(img.height);
+        } else {
+            this.canvas.setWidth(img.width);
+            this.canvas.setHeight(img.height);
+        }
+        this.canvas.calcOffset();
+        this.canvas.centerObject(img);
+        this.canvas.renderAll();
+
+        this.exportToPNG(oldHeight, oldWidth, rotated);
+    };
+
+    n.Fabric.prototype.exportToPNG = function(height, width, rotated) {
+        var png = this.canvas.toDataURL('png');
+        $("#target-png").attr("src", png);
+        var img = this.canvas.item(0);
+        img.width = width;
+        img.height = height;
+        if (rotated) {
+            this.canvas.setWidth(height);
+            this.canvas.setHeight(width);
+        } else {
+            this.canvas.setWidth(width);
+            this.canvas.setHeight(height);
+        }
+        this.canvas.calcOffset();
+        this.canvas.centerObject(img);
+        this.canvas.renderAll();
+    };
+
     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);
-        console.log("img width: " + img.width);
         img.rotate(this.rotation);
         this.canvas.renderAll();
-        if (this.rotation == 90 || this.rotation == 270) {
+        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;
@@ -776,8 +818,8 @@ $(function (n) {
                 img.width = this.canvas.width;
             }
             if (img.height < this.canvas.height) {
+                this.canvas.height = this.originalHeight;
                 img.width = this.canvas.height * img.height / img.width;
-                img.height = this.canvas.height;
             }
         }
         this.canvas.centerObject(img);