From 0d929e1171bdcbf3b76ae2da0077c279c9d11e16 Mon Sep 17 00:00:00 2001
From: bbaer <bbaer@math.uzh.ch>
Date: Fri, 5 Jan 2018 17:52:25 +0100
Subject: [PATCH] more or less working rotation and export
---
javascript/src/Plugins/qfq.fabric.js | 52 +++++++++++++++++++++++++---
1 file changed, 47 insertions(+), 5 deletions(-)
diff --git a/javascript/src/Plugins/qfq.fabric.js b/javascript/src/Plugins/qfq.fabric.js
index 90fc9b7f3..0b8999538 100644
--- a/javascript/src/Plugins/qfq.fabric.js
+++ b/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);
--
GitLab