Commit 0d929e11 authored by bbaer's avatar bbaer
Browse files

more or less working rotation and export

parent 4ac619c6
...@@ -36,6 +36,7 @@ $(function (n) { ...@@ -36,6 +36,7 @@ $(function (n) {
this.textSize = 16; this.textSize = 16;
this.panning = false; this.panning = false;
this.moveMode = false; this.moveMode = false;
this.canvasOriginalHeight = 0;
this.isZoomMode = false; this.isZoomMode = false;
this.userText = ""; this.userText = "";
this.drawRectangleMode = false; this.drawRectangleMode = false;
...@@ -324,7 +325,6 @@ $(function (n) { ...@@ -324,7 +325,6 @@ $(function (n) {
var that = this; var that = this;
setTimeout(function () { setTimeout(function () {
that.resizeCanvas();
that.canvas.renderAll(); that.canvas.renderAll();
}, 1000); }, 1000);
}; };
...@@ -749,19 +749,61 @@ $(function (n) { ...@@ -749,19 +749,61 @@ $(function (n) {
case "rotateRight": case "rotateRight":
this.rotateImage(90); this.rotateImage(90);
break; break;
case "exportImage":
this.prepareForExport();
break;
default: default:
console.error("unrecognized mode"); 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) { n.Fabric.prototype.rotateImage = function(degrees) {
var img = this.canvas.item(0); var img = this.canvas.item(0);
console.log("img width before Rotate: " + img.width);
this.setRotation(this.rotation + degrees); this.setRotation(this.rotation + degrees);
console.log("img width: " + img.width);
img.rotate(this.rotation); img.rotate(this.rotation);
this.canvas.renderAll(); this.canvas.renderAll();
if (this.rotation == 90 || this.rotation == 270) { if (this.rotation === 90 || this.rotation === 270) {
if (img.width > this.canvas.height) { if (img.width > this.canvas.height) {
img.height = this.canvas.height * img.height / img.width; img.height = this.canvas.height * img.height / img.width;
img.width = this.canvas.height; img.width = this.canvas.height;
...@@ -776,8 +818,8 @@ $(function (n) { ...@@ -776,8 +818,8 @@ $(function (n) {
img.width = this.canvas.width; img.width = this.canvas.width;
} }
if (img.height < this.canvas.height) { if (img.height < this.canvas.height) {
this.canvas.height = this.originalHeight;
img.width = this.canvas.height * img.height / img.width; img.width = this.canvas.height * img.height / img.width;
img.height = this.canvas.height;
} }
} }
this.canvas.centerObject(img); this.canvas.centerObject(img);
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment