Commit 9ee7b33c authored by bbaer's avatar bbaer
Browse files

optional image output added

parent 6dc5a981
...@@ -19,7 +19,6 @@ $(function (n) { ...@@ -19,7 +19,6 @@ $(function (n) {
n.Fabric = function() { n.Fabric = function() {
this.parentElement = {}; this.parentElement = {};
this.rotation = 0; this.rotation = 0;
this.imageToEdit = 0;
this.controlElement = $('<div>', { this.controlElement = $('<div>', {
id: 'qfq-fabric-control' id: 'qfq-fabric-control'
}); });
...@@ -60,6 +59,7 @@ $(function (n) { ...@@ -60,6 +59,7 @@ $(function (n) {
this.fabricJSON = ''; this.fabricJSON = '';
this.showObject = true; this.showObject = true;
this.mouseInsideCanvas = false; this.mouseInsideCanvas = false;
this.imageOutput = '';
// Handles button states and generation of said buttons. Should be renamed. // Handles button states and generation of said buttons. Should be renamed.
function ModeSettings() { function ModeSettings() {
...@@ -248,6 +248,7 @@ $(function (n) { ...@@ -248,6 +248,7 @@ $(function (n) {
var jsonButtons = $fabricElement.data('buttons'); var jsonButtons = $fabricElement.data('buttons');
var jsonEmojis = $fabricElement.data('emojis'); var jsonEmojis = $fabricElement.data('emojis');
var inputField = $fabricElement.data('control-name'); var inputField = $fabricElement.data('control-name');
var imageOutput = $fabricElement.data('image-output');
var viewOnly = $fabricElement.data('view-only') || false; var viewOnly = $fabricElement.data('view-only') || false;
var editImage = $fabricElement.data('edit-image') || false; var editImage = $fabricElement.data('edit-image') || false;
var resizeWidth = $fabricElement.data('image-resize-width') || 0; var resizeWidth = $fabricElement.data('image-resize-width') || 0;
...@@ -261,6 +262,7 @@ $(function (n) { ...@@ -261,6 +262,7 @@ $(function (n) {
this.getMeta(this.backgroundImage, function(width, height) { that.prepareStaticCanvas(width, height); } ); this.getMeta(this.backgroundImage, function(width, height) { that.prepareStaticCanvas(width, height); } );
} else if (editImage) { } else if (editImage) {
this.outputField = $("#" + inputField); this.outputField = $("#" + inputField);
this.imageOutput = $("#" + imageOutput);
this.getMeta(this.backgroundImage, function(width, height) { that.prepareImageEditor(width, height);}); this.getMeta(this.backgroundImage, function(width, height) { that.prepareImageEditor(width, height);});
this.modeSettings.initialize(this, jsonButtons); this.modeSettings.initialize(this, jsonButtons);
} else { } else {
...@@ -809,7 +811,9 @@ $(function (n) { ...@@ -809,7 +811,9 @@ $(function (n) {
n.Fabric.prototype.exportToPNG = function(height, width, rotated) { n.Fabric.prototype.exportToPNG = function(height, width, rotated) {
var png = this.canvas.toDataURL('png'); var png = this.canvas.toDataURL('png');
$("#target-png").attr("src", png); if (this.imageOutput !== "#") {
this.imageOutput.attr("src", png);
}
this.outputField.val("" + png); this.outputField.val("" + png);
var img = this.canvas.item(0); var img = this.canvas.item(0);
img.width = width; img.width = width;
......
...@@ -42,7 +42,9 @@ ...@@ -42,7 +42,9 @@
data-buttons="mockData/fabric.editor.buttons.json" data-buttons="mockData/fabric.editor.buttons.json"
data-edit-image="true" data-edit-image="true"
data-background-image="mockData/Scan2a.jpeg" data-background-image="mockData/Scan2a.jpeg"
data-control-name='fabric-output'> data-control-name='fabric-output'
data-image-resize-width="1200"
data-image-output="target-png">
</div> </div>
<input id="fabric-output" name="fabric-data" type="hidden"> <input id="fabric-output" name="fabric-data" type="hidden">
</div> </div>
......
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