From 6dc5a981632579307206a5c6ab64d3057f9b33b2 Mon Sep 17 00:00:00 2001
From: bbaer <bbaer@math.uzh.ch>
Date: Mon, 8 Jan 2018 11:29:52 +0100
Subject: [PATCH] size calculation now works with variables and based on
original image
---
javascript/src/Plugins/qfq.fabric.js | 30 ++++++++++++++++++++++++++--
1 file changed, 28 insertions(+), 2 deletions(-)
diff --git a/javascript/src/Plugins/qfq.fabric.js b/javascript/src/Plugins/qfq.fabric.js
index a9c386ef3..4a3af97a5 100644
--- a/javascript/src/Plugins/qfq.fabric.js
+++ b/javascript/src/Plugins/qfq.fabric.js
@@ -48,6 +48,9 @@ $(function (n) {
this.isDown = false;
this.origX = 0;
this.origY = 0;
+ this.imageHeight = 0;
+ this.imageWidth = 0;
+ this.resizeWidth = 0;
this.userChangePossible = false;
this.overObject = false;
this.selectionActive = false;
@@ -247,9 +250,11 @@ $(function (n) {
var inputField = $fabricElement.data('control-name');
var viewOnly = $fabricElement.data('view-only') || false;
var editImage = $fabricElement.data('edit-image') || false;
+ var resizeWidth = $fabricElement.data('image-resize-width') || 0;
this.parentElement = $fabricElement;
this.backgroundImage = $fabricElement.data('background-image') || false;
this.fabricJSON = $fabricElement.data('fabric-json') || false;
+ this.resizeWidth = resizeWidth;
var that = this;
if (viewOnly) {
@@ -276,6 +281,8 @@ $(function (n) {
};
n.Fabric.prototype.prepareImageEditor = function(width, height) {
+ this.imageHeight = height;
+ this.imageWidth = width;
var ratio = height / width;
var canvas = document.createElement('canvas');
var that = this;
@@ -762,9 +769,10 @@ $(function (n) {
var img = this.canvas.item(0);
var oldHeight = img.height;
var oldWidth = img.width;
+ var newSize = this.calculateImageSize();
var rotated = false;
- img.height = 1200 * img.height / img.width;
- img.width = 1200;
+ img.height = newSize.height;
+ img.width = newSize.width;
if (this.rotation === 90 || this.rotation === 270) {
// width is now height and viceversa
rotated = true;
@@ -781,6 +789,24 @@ $(function (n) {
this.exportToPNG(oldHeight, oldWidth, rotated);
};
+ n.Fabric.prototype.calculateImageSize = function() {
+ var img = { width: this.imageWidth, height: this.imageHeight };
+ if (this.resizeWidth !== 0) {
+ if (this.rotation === 90 || this.rotation === 270) {
+ if (this.resizeWidth < this.imageHeight) {
+ img.height = this.resizeWidth;
+ img.width = this.resizeWidth * this.imageWidth / this.imageHeight;
+ }
+ } else {
+ if (this.resizeWidth < this.imageWidth) {
+ img.width = this.resizeWidth;
+ img.height = this.resizeWidth * this.imageHeight / this.imageWidth;
+ }
+ }
+ }
+ return img;
+ };
+
n.Fabric.prototype.exportToPNG = function(height, width, rotated) {
var png = this.canvas.toDataURL('png');
$("#target-png").attr("src", png);
--
GitLab