[Enhancement] Add export functionality to PlotController

Extends PlotController by adding three new scoped methods:
exportPDF, exportPNG, exportJPG.

All three methods use basically the same steps. The HTML node
of the plot is passed through html2canvas which generates a canvas.
From the canvas we export a blob, PNG, or JPG then save the file.

platform/features/plot/src/PlotController.js

@@ -32,7 +32,8 @@ define(
         "./elements/PlotLimitTracker",
         "./elements/PlotTelemetryFormatter",
         "./modes/PlotModeOptions",
-        "./SubPlotFactory"
+        "./SubPlotFactory",
+        "./services/ExportImageService"
     ],
     function (
         PlotUpdater,
@@ -41,7 +42,8 @@ define(
         PlotLimitTracker,
         PlotTelemetryFormatter,
         PlotModeOptions,
-        SubPlotFactory
+        SubPlotFactory,
+        ExportImageService
     ) {
 
         var AXIS_DEFAULTS = [
@@ -63,6 +65,7 @@ define(
          */
         function PlotController(
             $scope,
+            $element,
             telemetryFormatter,
             telemetryHandler,
             throttle,
@@ -246,6 +249,7 @@ define(
             });
 
             self.pending = true;
+            self.$element = $element;
 
             // Initialize axes; will get repopulated when telemetry
             // metadata becomes available.
@@ -254,6 +258,18 @@ define(
                 new PlotAxis("ranges", [], AXIS_DEFAULTS[1])
             ];
 
+            $scope.exportPDF = function() {
+                PlotController.prototype.exportPDF(self.$element, 'plot.pdf');
+            };
+
+            $scope.exportPNG = function() {
+                PlotController.prototype.exportPNG(self.$element, 'plot.png');
+            };
+
+            $scope.exportJPG = function() {
+                PlotController.prototype.exportJPG(self.$element, 'plot.jpg');
+            };
+
             // Watch for changes to the selected axis
             $scope.$watch("axes[0].active.key", domainRequery);
             $scope.$watch("axes[1].active.key", rangeRequery);
@@ -364,6 +380,27 @@ define(
             return this.pending;
         };
 
+        /**
+         * Export the plot to PDF
+         */
+        PlotController.prototype.exportPDF = function (element, filename) {
+            ExportImageService.exportPDF(element[0], filename);
+        };
+
+        /**
+         * Export the plot to PNG
+         */
+        PlotController.prototype.exportPNG = function (element, filename) {
+            ExportImageService.exportPNG(element, filename);
+        };
+
+        /**
+         * Export the plot to JPG
+         */
+        PlotController.prototype.exportJPG = function (element, filename) {
+            ExportImageService.exportJPG(element, filename);
+        };
+
         return PlotController;
     }
 );

platform/features/plot/src/services/ExportImageService.js

@@ -0,0 +1,92 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2016, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/**
+ * Module defining ExportImageService. Created by hudsonfoo on 09/02/16
+ */
+define(
+    ['saveAs'],
+    function (saveAs) {
+
+        /**
+         * The export image service will export any HTML node to
+         * PDF, JPG, or PNG.
+         * @constructor
+         */
+        function ExportImageService() {
+        }
+
+        /**
+         * Renders an HTML element into a base64 encoded image
+         * as a BLOB, PNG, or JPG.
+         * @param {node} element that will be converted to an image
+         * @param {function} callback for passing the resulting image
+         * @param {string} type of image to convert the element to
+         * @returns {string} the color, in #RRGGBB form
+         */
+        function renderElement(element, callback, type) {
+            type = type || 'jpeg';
+
+            html2canvas(element, {
+                onrendered: function(canvas) {
+                    switch (type.toLowerCase()) {
+                        case "blob":
+                            canvas.toBlob(callback);
+                            break;
+
+                        case "png":
+                            callback(canvas.toDataURL('image/png', 1.0));
+                            break;
+
+                        default:
+                        case "jpg":
+                        case "jpeg":
+                            callback(canvas.toDataURL('image/jpeg', 1.0));
+                            break;
+                    }
+                }
+            });
+        }
+
+        ExportImageService.exportPDF = function(element, filename) {
+            renderElement(element, function(img) {
+                var pdf = new jsPDF('l', 'px', [element.offsetHeight, element.offsetWidth]);
+                pdf.addImage(img, 'JPEG', 0, 0, element.offsetWidth, element.offsetHeight);
+                pdf.save(filename);
+            }, 'jpeg');
+        };
+
+        ExportImageService.exportJPG = function(element, filename) {
+            renderElement(element, function(img) {
+                saveAs(img, filename);
+            }, "blob");
+        };
+
+        ExportImageService.exportPNG = function(element, filename) {
+            renderElement(element, function(img) {
+                saveAs(img, filename);
+            }, "blob");
+        };
+
+        return ExportImageService;
+    }
+);