diff --git a/platform/features/plot/src/PlotController.js b/platform/features/plot/src/PlotController.js index 88d82ea31b..1cbccb8cfb 100644 --- a/platform/features/plot/src/PlotController.js +++ b/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; } ); diff --git a/platform/features/plot/src/services/ExportImageService.js b/platform/features/plot/src/services/ExportImageService.js new file mode 100644 index 0000000000..b1dc8a51d7 --- /dev/null +++ b/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; + } +);