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