optional image output added

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;

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>